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:
- Put an empty container at the start of your content. (In this case:
- Make that container float to the side of your content, and give it the minimum height you want, and a 1px width.
- Put an empty container at the end of your content, and give it
- 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
heighton the container to your desired height, with
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.