A solution with full IE6+ support. I'll pull out and explain the relevant bits of code.
Modern support
div.content_columns {
width: 320px;
outline: 1px solid black;
background-color: gold;
text-align: center;
display: table-cell; /* No floats, this instead */
}
So, since modern browsers make this task easy, all we need to do is use display: table-cell to get this to work. It makes the columns equal height, and acts as a table-cell. Easy peasy lemon squeezy.
IE 6 & 7 support
<!--[if lte IE 7]>
<style>
div#content {
overflow: hidden;
}
div.content_columns {
vertical-align: top;
display: inline;
zoom:1;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
</style>
<![endif]-->
Now, for IE 6 and 7 support we're going to use a few tricks. First off, it should be noted that this doesn't have to be done in a conditional comment, but I like it better that way. Cleaner to me. But you can use CSS hacks to get these values to only work in IE.
What we're doing is getting IE 6 & 7 to treat each column as an inline-block element, but since they don't support that (for block level elements at least) we use inline display, and a zoom: 1; fix to trigger IE's hasLayout property. This will treat it like it is an inline-block elmenent. Then, we set them all to be aligned at the top with each other, and use another little trick. We use the padding: 9999px to extend the bottom of the element so far that the other elements are not likely to be longer than it, and we use margin: -9999px; to not change the rendering of the page when we do so. We don't want to extend the page, just the background. 9999px is arbitrary and can be any value as long as it is high enough to be greater than the difference between the longest and shortest columns. And for the final touches, we set overflow: hidden on the container element so that the backgrounds don't extend the page by bleeding out the bottom.
And there you have it, full IE 6+ support for multicolumn fixed width layout using pure CSS 2 (plus MS zoom).
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
