Mysterious IE-only pixel jog with three floating divs

[ADAM Web Design]

Hi everyone,

I'm working on a site concept and layout based off of the pixy.cz 3-column layout here (http://www.pixy.cz/blogg/clanky/css-3col-layout) (there is a reason for the mod, which I will reveal soon). However, I keep noticing that, in IE, I get a mysterious "pixel jog" whereas the content of the middle div wraps itself around the left floating div.

To see what I'm talking about, click here:

http://www.adamwebdesign.ca/samples/3_column_liquid_layout_sample.html

The "content area" div is indented slightly on the first three lines (where the AAA lines are in the left div) and isn't anywhere else.

In Firefox, it looks okay.

Does anyone have any thoughts/suggestions as to what I can do to get the indent to disappear?

Thanks.

[crewdy]

I get this little bug all the time, as far as I know there is 2 main ways to fix it;

First is to set your left float to "display:inline", though this can cause some more problems if you have heights set on elements.

The second is to set a height on the relative floating element (i.e. the centre column) - the best way to do this is by setting the height to 1% as this will not effect Firefox at all. Both these solutions have worked for me in the past when using floats.

Hope this helps.

[ADAM Web Design]

Yeah, it did. Thanks.

But now I'm running into another problem. It seems that the left float and the right float heights don't transfer themselves to the heights of the containing divs (the ones with the backgrounds).

Visit the page again to see what I'm talking about.

[Tim]

Hi Adam.

I'm not 100% sure I understand the problem but if you apply the 1% height to the left and right sidebgdivs instead, both columns appear equal in IE, regardless of no content in the right one. No effect in FF. However, as you have it, any content in 'contentarea' will extend the side columns to match it's height in both browsers.

Am I missing the point?

[ADAM Web Design]

Unfortunately, yes.

When the content area is smaller than that of either floating column, the blue backgrounds don't extend to match the height of the highest floating column (in this case, the left one).

This has nothing to do with the height: 1% property either. I took it out and no luck.

The thing is that it does behave exactly the same in FF.

[Tim]

I've sent you a PM.

[ADAM Web Design]

Thanks, dude, but there's a reason I want to use this particular layout. It will make sense eventually...just not right now.