Wrapping a Div around Floats in HTML
The second of my digressions onto HTML looks at how to make sure that a DIV is at least as high as the floating DIVs it contains.
If you do something like:
<div id='outer'> <div style='float:left'>Content One</div> <div style='float:left'>Content Two</div> <div style='float:left'>Content Three</div> </div>
and want div#outer to encompass the three content divs, you find a browser incompatibility. IE7 does that I want - the enclosing div encloses its children. Other browsers do what the CSS standard says is the right thing: div#outer is one pixel high and the rest of the divs descend below it.
I want it to work on all browsers, however. After various playing around I discovered that:
<div id='outer'> <div style='float:left'>Content One</div> <div style='float:left'>Content Two</div> <div style='float:left'>Content Three</div> <div style='clear: both; height: 0'></div> </div>
seems to work. [Interestingly, although I'm working exclusively in XHTML, using <div/> doesn't work - the XHTML spec recommends that you don't have empty tags like div (anything that normally contains content), but this isn't a normative part of the spec, so browsers should really support full XML syntax in this regard.]
The application of all this is that I can now apply a vertically tiled 1px high background image to div#outer, with column shading on it, and have the different height columns all appear to be full-height - something that is very difficult to do by making the floating divs actually the same height. It is a solution that avoids many of the accessibility and fragility problems of the "one true layout" approach.
Combining this with the previous blog post I can now get full-height columns in any order, which is what I needed.