Charles Reace
PHP Musings

No, this has nothing to do with the aftermath of the Macy's Thanksgiving Day Parade. This is about that annoying thing with floated HTML elements within a container element, whereby it seems that said container has no inkling of the fact that it should expand enough vertically to contain any and all such floated elements.

I used to address this via the common Band-Aid of inserting a non-floated element just before the closing tag of the container, and giving that new element the clear: both; CSS property:

<div id='container'>
  <p class='float'>This element has a float:left or float:right;" style property.</p>
  <div class='clear'></div> <!-- "clear" class has the "clear:both;" style -->
</div>

But lo and behold, I recently discovered a simpler solution that does not require any extraneous, empty HTML mark-up, thanks to this article at  quirksmode.com. Now I can get rid of that semantically useless <div class='clear'></div> line in the above HTML, and instead just make sure the style for the "container" div includes:

#container {
  width: 100%;
  overflow: auto;
}