Div/Image Wider Than Page

HTML & CSS
1

I have a simple image rotation at the top of the main page of my website and I want to put a shadow around it without making the site wider. My website is 960px but the image that would have the shadow around the rotation is 982px…

I dont want horizontal bars to appear at the bottom of my page because of the 982px image.

As an example of what I’m trying to do, if you take a look at the Macbook Pro page on apple.com the edges of the outer macbook pros are outside of the width of the page but if you make the browser small enough horizontally you see the edges dont affect the width of the page itself… the horizontal bars appear when you make your browser window smaller than the site container.

Whats an easy/clean way to do this?

2

On the Apple site they’ve done it with negative margins:

#overview #hero .gallery-view {
  margin: 0 [COLOR="Red"]-16px[/COLOR] 0 [COLOR="Red"]-18px[/COLOR];
  width: 1014px;
}

So they’ve pulled the image container left and right (wider that its own container) with those negative margins. Quite clever, really.

Mind you, another approach could be to have a larger container and create the appearance that it was narrower by use of background images—although this might limit your options a bit.

3

yea i saw that but didnt really understand how it worked… ill try that out and see how it works… thanks!

4

A margin—for example, a left margin of 20px—will push an element 20px to the right. If you put a minus sign in front—that is, -20px— then it pulls the element the other way, 20px to the left, outside of its container. You can do this in both directions, allowing the element to be wider than its container. Weird, but interesting too!

5

Hi,

That’s not quite the whole story :slight_smile:

The negative margin is the technique which allows the element to disappear at the viewport edge. It is not the trick to hiding the scrollbar.

The scrollbar is hidden by having a 100% wide wrapper that has a min-width and then uses overflow:hidden.

probably easiest to see with an example.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
    margin:0;
    padding:0
}
#wrap {
    width:100%;
    min-width:960px;
    overflow:hidden;
}
#outer {
    width:960px;
    margin:auto;
    background:#ccc;
    padding:20px 0;
}
#inner{
    width:960px;
    margin:auto;
    border:30px solid #000;
    background:red;
    margin:0 -30px;
}
h1 {
    margin:0;
    padding:0;
    text-align:center;
}
</style>
</head>
<body>
<div id="wrap">
    <div id="outer">
    <div id="inner">
        <h1>Test</h1>
        </div>
    </div>
</div>
</body>
</html>

You don’t actually need the negative margins as the page will not show the scrollbar until 960px is reached. However without the negative margin the black border in my example would sit at the viewports edge and not go beyond it.

As it is now it allows the page to shrink and eventually the borders go beyond the viewport but leaves all content visible without a scrollbar.