Page 1 of 1

[SOLVED] My internal IE bug tracker is failing me... floats

Posted: Thu Mar 05, 2009 5:16 am
by Chris Corbyn
Simple demo:

Code: Select all

<div style="width: 400px;">  <div style="background: red; float: left; clear: both;">Top left</div>  <div style="background: blue; float: right; clear: both;">Bottom right</div></div>
The two boxes that are floating should go left and right, but should clear each other so the first sits top-left, and the second sits bottom-right.

In all browsers except IE 6 (that I have access to on my Mac) this works. In IE 6, the boxes end up on the same row as each other. Why?

My "real world" problem is actually a list where each <li> goes left/right to give the impression of a conversation (speech bubbles coming from the left and responses from the right).

Re: My internal IE bug tracker is failing me... float & clear

Posted: Thu Mar 05, 2009 5:20 am
by Benjamin
I believe you have to set the width on block level elements, but I'm not a layout guru.

Re: My internal IE bug tracker is failing me... float & clear

Posted: Thu Mar 05, 2009 5:40 am
by Chris Corbyn
That would kinda suck. This is a fluid layout and each float is supposed to change as the window is resized :(

I found this:

http://www.brunildo.org/test/IEWfc3.html

Sounds like a right mess. In short, IE 6 doesn't support float + clear on the same element, you have to nest elements. This may be a brick wall for my semantically marked up list and I may have to replace with divs. Grrr...

EDIT | I'm just gonna wrap the contents of each <li> with a <span> and set it to display: block then float it.

Re: My internal IE bug tracker is failing me... float & clear

Posted: Thu Mar 05, 2009 5:47 am
by Chris Corbyn
Confirmed. Placing the clear on a wrapper element, and then nesting a float inside that fixes it. How pathetic. I hate how IE makes me downgrade my markup :(

Re: [SOLVED] My internal IE bug tracker is failing me... floats

Posted: Thu Mar 05, 2009 8:54 pm
by JAB Creations
Chris, IECCSS, see my tutorial here and you can keep IE specific code in an IE specific file...
http://www.jabcreations.com/web/web-ieccss.php

...and feel free to make me aware of any clientside threads where I can help out with CSS; I'm more then happy to return the favor in this forum if anyone gets stuck. :wink: