Creating the Appearance of Equal-Height Columns

Perhaps the most common task CSS designers want to accomplish with background images and color is making two or more columns equal in height so that their backgrounds extend exactly the same amount down the page and they’re nicely aligned on the bottom. As opposed to table cells, which are connected through table rows, individual divs have no connection to each other, so side-by-side divs will not match each other in height by default.

It’s possible to get divs to act like table cells and match each other in height using display: table-cell or other table-related display values. But, as I mentioned in Chapter 2, IE doesn’t support these values, so unless you’re willing to let IE users see unequal-height columns, you need to use some other technique.