The unholy brilliance and universal utility of this CSS hack has made this the greatest day of my young life

Equal height columns with divs! My cup of happiness overflows. Although my support of <div>s over tables is constant and complete, nonetheless a single use case causes me grief: When laying out columns containing content blocks potentially of various heights (that is, always), one cannot set a background color on a column, because its height will be that of its content, not that of the longest column. OH NO.

Enter my favorite hack ever. All you do is set the bottom padding on each column to some enormous number of pixels (the maximum delta between any two column heights), then give each column a negative bottom margin of the same number. Now give the column container an overflow: hidden.

Unfortunately, there's an issue in Gecko browsers. I was doing this in a site template that wraps around some generated Docbook HTML; as you might imagine, linking to anchors inside the content happens a lot. And that's where the equal height hack fails;overflow:hidden doesn't react well to anchors inside--it scrolls the container to that point, instead of the page, leaving you stranded halfway through your content. Luckily, there's a fix: if you set position: absolute on those anchors, everything's okay. Not everyone can do that, of course. Thankfully, I could, and it's working like gangbusters.

For those who use YUI's Grids CSS, as I do on those rare occasions when I get to lay out some blocks on a nascent page, here's exactly what I did:

.yui-t1 #bd { overflow: hidden; }
.yui-t1 #bd .yui-b {
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.yui-t1 #bd a[name] {
position: absolute
}


Naturally you can replace .yui-t1 with whatever layout template you're using.

This is old news to most. I don't know how it eluded me for so long. But now I can die.