This was a bit of a pain to find via Google tonight so I figured I’d link to it and help others find it.

Tonight I was doing a bit of Javascript work and in the interface I was building had a couple of elements using CSS floating. They were all contained together inside of another DIV. Issue was that I had other things after the container in the layout that should have been block level and gone below it. Trouble was that the floating items were floating around this later item. I needed a way to “contain” the float elements without modifying any surrounding elements to account for them.

I finally dug up the Clearing Floats page on quirksmode.org. In the end setting “overflow: hidden” and “width: 100%” on the containing DIV took care of “containing” the floats to just that DIV. Awesome.

Did I mention I love quirksmode.org? Honestly. It’s one of the best JS resources there is.