Often, when you’re putting a design into CSS you run into various browser support issues, especially with float behaviors. Let’s say you have a thin top layer, which may contain some navigation and/or a banner, and below that you have a main content container. Now, let’s say you have a logo, or some other element that you want to overlap both of them on the right side, like this (in yellow):
With a simple float and using the proper cascade in our HTML body, that’s not a problem. Here’s the style:
body {
text-align: center;
}
#top, #content, #right {
text-align: left;
border: 1px solid #333;
margin: 6px auto;
padding: 6px;
}
#top {
background: #ccc;
width: 500px;
}
#content {
width: 500px;
background: #ddd;
height: 200px; /* only using height for testing purposes */
}
#right {
float: right;
width: 200px;
background: yellow;
}
And here’s what’s in the html body tag:
<div id="top">
<div id="right">
<p>And here's our right-side column, which we want to
overlap/connect the top and main divs.</p>
</div>
<p>Some top content stuff</p>
</div>
<div id="content">
<p>And here's our main content body.</p>
</div>
Check it out in FireFox/Safari, and sweet! We get what we expect, as shown in the above image. But uh-oh, have a look at Internet Explorer:
Internet Explorer fills out the top div to fully contain our floated element, not what we want. Let’s lose the float, and try some positioning tricks.
Absolute Positioning - Such a Rebel
Maybe this will help - absolute positioning basically removes an element from the document “flow” and puts it at whatever X / Y coordinates we tell it to. In other words, it ignores what all the other elements on the page are doing. So let’s try that. The HTML will stay the same, and we’ll just change the #right div to this:
#right {
position: absolute;
top: 0;
right: 0;
width: 200px;
background: yellow;
}
Which produces:
OK, that’s not what we want. But, we told it to put this element at zero pixels from the top and zero pixels to the right, and that’s exactly what it did. No matter where you put the <div=”right”> code in your HTML, you will get the same result (the cascade, or order, of elements in our HTML body doesn’t matter in this case). In this example, the X/Y coordinates are always relative to the <body> element. So, what we’re really telling it to do is put #right zero pixels from the top of <body> and zero pixels to the right of <body>. However, upon checking this in Internet Explorer, we can see that we’re at least getting similar behavior now. For the CSS coder - this is always a step in the right direction - get similar behavior in the browsers you want to support, even if it’s all wrong, and then proceed to fix things step-by-step.
Maybe Relative Positioning?
Now, what does relative positioning mean? Relative positioning means that an element is positioned relative, or in relation to, where it would normally occur in the document. Just for kicks, let’s switch our #right div to relative instead of absolute:
What happened? Nothing really happened. Since both our “top:” and “right:” attributes are set to zero, it’s the same as not doing anything at all. In general, relative positioning with top:/left:/right: attributes is not very useful. It’s power mostly lies in how a relatively positioned element affects other elements, which we’ll see next. So let’s pull the trigger and get this correct in all of our browsers.
Using Relative to Tame the Absolute
The solution is to make #right’s parent element relatively positioned, and then to reassign #right as an absolutely positioned element. In other words, if we just add “position: relative” to our #top div, and make #right absolutely positioned, we’ll get consistent results in all of our browsers that looks the way we want it to:
#top {
background: #ccc;
width: 500px;
position: relative; /* made this relative positioned */
}
#right {
position: absolute;
top: 0;
right: 0;
width: 200px;
background: yellow;
}
Hurray! It works in Internet Explorer too! We have consistent results, and it’s what we wanted to do in the first place.
Extra Credit
The pixel-trained eagle-eyes out there may have noticed that the right-side margin is no longer there (from the first screen shot). Rather, all elements are flush-right. By either adding some right-side margins, or changing the right-side positioning, you can easily fix this, for example:
#right {
position: absolute;
top: 0;
right: 0;
width: 200px;
background: yellow;
margin-right: 6px; /* added to remove the flush-right behavior */
}
Now we get the same results as in the initial screen shot that used a float. Cheers!
“…get similar behavior in the browsers you want to support, even if it’s all wrong, and then proceed to fix things step-by-step.”
Amen. Sometimes I’m happier when everything is finally “wrong” in the same way than I am when the styles finally work; it means I’m close to the solution.