Tuesday, August 28, 2007

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!

7 comments:

juanita. said...

:I

Jesse said...

Clearly you should've ended with

"neat!".

haleyglenn said...

this is so interesting.................................

kaare.iverson said...

I'm glad that someone finally thinks I'm cool for blogging about fixed layout!

Anonymous said...

Online Pharmacy for Cialis, Levitra, Tamiflu, Viagra. Order Generic Medication In own Pharmacy. Buy Pills Central.
[url=http://buypillscentral.com/about_en-us.htm]Buy Cheap Viagra, Cialis, Levitra, Tamiflu[/url]. rx generic drugs. Top quality medications pharmacy

Anonymous said...

Additionally to, we accord discount Cialis dispensary, which is kind of functional in dislike than other trendy discount Viagra Online Erectile dysfunction Viagra chemist's shop online drugs.

Anonymous said...

What about it will tell?