IE6 - strange float rendering

Lotar

09-20-2007, 02:58 PM

Hi,

got a problem with the following code:

<div style="float: left; width: 100px; height: 10px; background-color: red;"></div><div style="float: left; width: 100px; height: 10px; background-color: green;"></div>
<div style="float: left; clear: left; width: 100px; height: 10px; background-color: yellow;"></div><div style="float: left; width: 100px; height: 10px; background-color: blue;"></div>

That's all, I simplified it to better illustrate my problem. Thing is, that the Firefox renders it in a way I want it, but IE doesn't. Instead of placing the blue div in the second line next to the yellow div (as in FF), it places it in the first line next to the green one. Is there some workaround ? Thanks in advance.

effpeetee

09-20-2007, 07:44 PM

I can't help you directly but you may find some help here.

http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml

Frank

Basscyst

09-20-2007, 07:58 PM

Not sure why it's not clearing the float on the third box, but you can put the boxes in a container div with a width equal to the width of the containing elements. This will force the third element down to the second row even if it is being floated.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Help</title>
</head>
<body>
<div style="width:200px;">
<div style="float: left; width: 100px; height: 10px; background-color: red;"></div>
<div style="float: left; width: 100px; height: 10px; background-color: green;"></div>
<div style="clear: left; float: left; width: 100px; height: 10px; background-color: yellow;"></div>
<div style="float: left; width: 100px; height: 10px; background-color: blue;"></div>
</div>
</body>
</html>

Basscyst