Keep the same heights for multi-column layouts in CSS

When having a multiple column layout using float, it is sometimes important to ensure that the columns all having the same height. This is especially important when the columns have backgrounds that are different from the background of the container.

There are quite a few way ensure identical heights: .

Among those, my favorite one is the Flexbox Method by Paul Irish. The flexbox method make use of very large padding and is a pure CSS solution.

Suppose we have a div "container", whose direct children are the columns, then the flexbox only requires extra-large padding and negative margin with the same magnitude, as follows:

HTML

	<div class="container">
	<div class="col">...</div>
	<div class="col">...</div>
	...
	</div>

view raw gistfile1.html hosted with ❤ by GitHub

CSS

	.container > div {
	padding-bottom: 9999px;
	margin-bottom: -9999px;
	...
	}

view raw gistfile1.css hosted with ❤ by GitHub

The mechanism is simple, since the column has a very large bottom padding, the background extends downwards almost infinitely. Then a negative margin make sure that the effective height of the column is not affected. The container will automatically cut of the extra backgrounds so nothing pokes out.