div1p1. Following is a multi-browser “stop the floating” AKA “clear” demonstration from http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
div1a.p1. My width is 15em (other blocks are 20%)
div1b.p1. So replacing a table with floating blocks that styled as "display:inline" and "float:left"
btwn div1b&1c.p1. Here’s some text between the 2nd and 3rd floating block...
div1c.p1. And I’m wrapping them in a div with style "overflow:auto" which is supposed to make the outer block as tall as any of its inner blocks.
div1d.p1. PS: firefox < 3 requires the "float:left" for the inner floating blocks, but firefox 3 and safari don't need it.
div1e.p1. PS: firefox < 3 requires the "float:left" for the inner floating blocks, but firefox 3 and safari don't need it.
div1.p2 (after div1e) PPS: this is some text within the enclosing block "div1", (at the bottom after, though that might not matter), to see where it floats.
div2.p1. This wants to be under the other blocks, like a footer, and has style "clear:both"
div3.p1. Float1
div3a.p1. 15em
div3b.p1. 20%
div3.p2 btwn div3b∓3c.p1. loose paragraph 1
div3c.p1. 20%
div3d.p1. 20%
div3.p3 after div3d. loose paragraph 2
div4.p1. Page by Mike Roam, revised 20 mar 2009