IE Float Problem & Wrapper Question

Wrapper

[madcat]

Hi:

Say I have three <div>'s on a page. One is my Header, one is a Sidebar, and the other is the Content.

I have floated the Sidebar left, and given it a width of 200px. Then I gave the content a margin-left of 200px to create a simple two-column layout.

In Mozilla & other compliant browsers, this seems to work. In IE, it looks like a 3px gap is created between the Sidebar and the Content <div>.

If I the following rules:

html #sidebar { margin-right: -3px; }
html #sidebar { margin-left: 0; }

...It seems to correct IE's problem, however, it causes Mozilla to slide the Content section back under the Sidebar (as it should) because I have overwritten the margin-left: 200px setting of the #Content I had earlier in the style sheet.

Which fix/hack would I use to correct this, and why is happening anyway?

Also, how is a wrapper or container div used in CSS layouts. What's the purpose and how should it be used (maybe a link explaining this).

All help is appreciated.

[lonesome]

Hi
This sounds like the IE 3px float bug, once your content in the Content div goes below the bottom of the Sidebar does it jog back to where it's supposed to be, if so this is you're problem Position is Everything has an article with a fix for this at [positioniseverything.net...] and explains it far better than I could.

[madcat]

Hi, thanks for the reply. I haven't tried actual content such as paragraphs or text (at work), but I have tried making the Content <div>'s height greater than the length of Sidebar. Will that have the same effect as just filling it with content?

[lonesome]

No it dosen't shift the div just the contents of the div so if you have text in the Content div this would be shifted 3px right until it got below the level of the floated div at which point it would jump back to the correct place.
ie

+---++-----+
¦sb ¦¦ blah¦
+---+¦ blah¦
.....¦blah ¦
.....+-----+

where the jump is 3px. The PIE link has a much better picture illustrating the problem.