Clearing the last floated element using CSS?

I have a collection of floating divs within another div. The开发者_如何转开发 child divs are of variable width and height - that is they're populated using dynamic data which I have no control of. Now sometimes what happens if that the last child div has a massive height with a wall of text because it is forced into a small width by the other divs. This only happens in IE 6, 7, 8 - FF3.6 handles it correctly - it makes sure the huge div starts after a line break with a big width.

Is there anyway I can force IE into the same behaviour?

Actually, if you specify a width for that floated div, then it will use that width, or else the floated div will "shrink wrap" to the content. So you can try that, or you can use this style for that float:

#the-last-div { clear: both; float: left }

you may or may not want it floated if you want it to be across the page all by itself.

The only solution to this is one of three: specify clear: both;, specify a default width, or do either or both of these dynamically with jquery/javascript. As long as you are letting the content decide the height and width you are going to run into problems.

Using clear:both; on all divs will put each float onto its own row. This doesn't sound like what you want.

Specifying a width will be the most predictable. The browser will respect the width and will clear to the next line if there is not enough space.

If you are loading content dynamically that requires a specific width then it should be trivial to dynamically adjust the containing div width appropriately. You can perhaps check the length of the content and assign a width to the div receiving the content if the content is too long. Since we don't have your code you'd have to experiment with the length and width to get it right.

Is the content that you're loading simple text or does it contain divs and other block level elements? How is it floated? is it a mix of float: left; and float: right; ? or is it all to one side?