CSS Floats Weird behaviour

why becomes:

<div style="width:400px">
    <div style="float:right;clear:right;height:90px;width:1px;background-color:blue;"/></div>
    <div style="float:right;clear:right;width:115px;height:143px;background-color:blue;"/></div>
    <div style="float:left;clear:left;height:210px;width:1px;background-color:red;"/></div>
    <div style="width:198px;float:left;clear:left;height:105px;background-color:red;"/></div>
</div>

this:

instead of:

It does that in all major recent browsers.
How can I get the behaviour of the last image?

Hi,

It’s not actually weird behaviour as a float will only float as high as the previous float in the html. You should really be doing that structure in 2 separate floated columns rather than individual items.

You can get the effect you want if you change the order of your divs bt will only work for that small demo and not for multiple items of varying height.


<div style="width:400px">
    <div style="float:right;clear:right;height:90px;width:1px;background-color:blue;"></div>
    <div style="float:left;clear:left;height:210px;width:1px;background-color:red;"></div>
    <div style="float:right;clear:right;width:115px;height:143px;background-color:blue;"></div>
    <div style="width:198px;float:left;clear:left;height:105px;background-color:red;"></div>
</div>


Note that divs are not self closing so remove the trailing slash.

ah, well that closing slash was because of a copy paste from firebug.

The idea is that the main div contains text, and the floats push it inwards to make space for other elements absolute positioned on top. These spaces are calculated on the fly and then applied to the div, does changin the order solve the problem when the height of the divs change as well, or maybe the right side has more floated items.

It is unlikely to work with multiple items as you will get gaps again:

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>
<div style="width:400px">
		<div style="float:right;clear:right;height:90px;width:1px;background-color:blue;"></div>
		<div style="float:left;clear:left;height:210px;width:1px;background-color:red;"></div>
		<div style="float:right;clear:right;width:115px;height:143px;background-color:blue;"></div>
		<div style="width:198px;float:left;clear:left;height:105px;background-color:red;"></div>
		<div style="float:right;clear:right;height:90px;width:1px;background-color:blue;"></div>
		<div style="float:left;clear:left;height:210px;width:1px;background-color:red;"></div>
		<div style="float:right;clear:right;width:115px;height:143px;background-color:blue;"></div>
		<div style="width:198px;float:left;clear:left;height:105px;background-color:red;"></div>
		<div style="float:right;clear:right;height:90px;width:1px;background-color:blue;"></div>
		<div style="float:left;clear:left;height:210px;width:1px;background-color:red;"></div>
		<div style="float:right;clear:right;width:115px;height:143px;background-color:blue;"></div>
		<div style="width:198px;float:left;clear:left;height:105px;background-color:red;"></div>
</div>
</div>
</div>
</body>
</html>


You will probably have to script the 1px “sandbag” height to get the exact heights to make it all work together as you want.

Is it that important to be exact?