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

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

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

Post 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).
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

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

Post by Benjamin »

I believe you have to set the width on block level elements, but I'm not a layout guru.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

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

Post 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.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

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

Post 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 :(
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

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

Post 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:
Post Reply