Sunday, March 16, 2008

Extending HTML container element's height around inner floats

A common problem with using floats in a site is that their container does not expand around them. Imagine that #left-side has float:left and #right-side has float:right, both having width: 49% CSS properties. Example:
<div id="wrapper"> some title of header
<div id="left-side">some content</div>
<div id="right-side">some content</div>
</div>
Usually this markup would render the wrapper as high as the wrapper's text height (one row only). What you'd expect is that it goes around all of the inside floats. It does not unless you give the container the following CSS property:
overflow:auto;
However, it does not stop there. As expected, this would do the trick well in Firefox (2.x), but IE (as expected,again) does not entertain the whole idea unless a really weird CSS hack is applied (to the container element):
_height:1%;
Seems to produce desired results in IE as well.

No comments: