nerdcore blog

This is the story of a two column layout, one fixed width, one width:auto. This is the story of how IE6's 3px jog around floating elements nearly killed me. This is the the story about how I defeated it.

Nerdcore.

Here's the basic HTML of my layout:

header
leftcol
content

(sorry about the lack of html there, blogger kept rendering the divs)

And here's the basic CSS (before the fix):

#header {
margin:0px;
padding:10px;
}
#leftcol {
width:180px;
float:left;
padding:0px;
}
#content {
width:auto;
padding:0px;
padding-left:180px;
}

Pretty standard...and not at all an issue in any browser by IE6, because of that damned 3px jog effect around floating elements. With fixed width elements it's not a problem to apply little fixes like margin-whatever:-3px; etc... but we have an auto width element here that's causing headaches.

So here's a solution.

Pretty simple really.

I changed the float on the left hand column to this:

#leftcol {
width:180px;
position:absolute:
top:auto;
left:0px;
}

I didn't think that it would work since the absolute positioned element is kind of outta the DOM, but apparently the variable height of the header will control the top position of the absolute element. Since the leftcol isn't "floating" anymore, IE^ no longer renders the 3px jog.

Sweet!