min-height hack

Showing how to use a cleared float to hold the content to a certain min-height, but use IE's broken overflow:visible to make up for its broken float handling.

This is just a bunch of extra content to show that this hack holds the container only to a minimum height. When extra content shows up, like this, is is able to properly grow in height to accommodate the extra content. To summarize this technique:

  1. Put an empty container at the start of your content. (In this case: <div id="holdtall"></div>)
  2. Make that container float to the side of your content, and give it the minimum height you want, and a 1px width.
  3. Put an empty container at the end of your content, and give it clear:both.
  4. Use IE's conditional comments to include a valid SGML comment—which will be ignored by other browsers—to hide the float, and instead set the height on the container to your desired height, with overflow:visible.

Mozilla has a bug, where if the width of #holdtall is 0, or if the equivalent width is 0 through a negative margin, it does not properly clear past the element.

'