Contents of 3rd floated column do not show up in IE6

float css ie6

[rev909]

I'm trying to change one of my sites from a good ol' table based layout to a CSS / XHTML one but I'm having a (first) problem with a the layout I started from a "template" I took from here:

[fu2k.org...]

Here's what I'm talking about: <link broken>

Basically I have a 3 (faux-)column layout with 3 floated divs. The first and second columns are put in a separate container float and the third column is floated next to this container. Everything was alright while developing in Firefox but then I checked in IE 6 and there it was: the surprise! The contents of the third column were not showing up. I think it's there though, because it's taking up space under the other elements... But it's somehow invisible. I tried fiddling with the contained div's width and I noticed that if I reduce it by ~5 pixels the content shows up in IE but it's misaligned to the right and I don't understand why because if I set the third column's background to be visible there's clearly a gap on the left even if I set all margins and paddings to 0.

Sorry about the mess in the code, I know half the comments are in English (kept from the original template) half are in Romanian. It's actually a draft, I haven't had time to clean it up yet.

Please suggest fixes or alternate templates I could start out from. I would like the column order in the source to be [main column], [side column 1], [side column 2]. The order of the side columns doesn't really matter but I would like my main column to come first.

Thanks!

[edited by: SuzyUK at 12:33 am (utc) on Aug. 5, 2009]
[edit reason] No personal URI's per Charter [/edit]

[doodlebee]

Well, I can tell you right now that your links are going to be removed - they don't allow that here. Buit I did get to take a quick peek before they disappered.

First off, you don't have a ".column_three" set in your regular stylesheet. Oh yes, it's there, but it's "hacked" for NN4 (OMG - you actually care about NN4?!?) As for other browsers - it doesn't really exist. (Since Netscape *is8 amozilla-based browser, that could be why it's picking up the content.)

I've also noticed that you have .column-one set to "float:left, .column-two set to "float:right", and .column-three is set with a margin-left to push it over. This will cause "column-two" to overlay/override the last column, as, technically, it's pushed all the way to the right.

You need to set your .column-one and .column-tow to *both* float:left, and your .column-three to float:right. This will cause it to remain in order, but they should all pop back into place. (And set your .column-three *out* of the hack, as well, so IE can read it.)

By the way, you should get rid of the hacks altogether anyway. Use conditional comments. Makes your life a whole lot easier. (And really, NN4? really? I didn't know anyone still designed for that one. Especially using CSS - NN4 and CSS don't mix very well.)