Using clear:left or clear right doesn't seem to follow the css spec in firefox 3.6. It acts more like clear both. Here's an example page http://blog.microrollers.com/p/test-firefox-clear-bug.html This is the code: <div style="width: 1px; height: 200px; float: right;"></div> <div style="width: 100px; height: 200px; float: right; clear: right; margin: 10px 10px 10px 0; background: red;"></div> <div style="width: 100px; height: 100px; float: left; background: blue; margin: 0 0 10px 10px;"></div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum est at tellus iaculis faucibus. Donec cursus adipiscing pharetra. Sed ac viverra felis. Phasellus elementum tempor facilisis. Quisque erat eros, ultrices id scelerisque sed, molestie sed turpis. Donec aliquet consequat laoreet. Nunc et sapien magna, vitae porta justo. Integer mattis sagittis luctus. Proin eget sem nec augue laoreet varius eget id augue. Nam odio nunc, malesuada vitae sodales et, tempus quis felis. Cras tempor egestas tellus, non euismod odio viverra et.<br /> The blue box should float in the upper right of the blog post. The red box should float on the left of the blog post and the 1px wide div should push it down 200px so it's in the middle of the post. If I put the code for the blue box before the code for the red box it displays properly but I can't get it in the template that way. The red code will be in the template the blue box is part of the post. It works fine in IE but not firefox or chrome. In this case it seems IE is following the spec. Is there any workaround for this?