AAiddennium » BLOG «

Since the times when it got not recommended to use tables for layout, from time to time I have been facing a problem how to set the same height for columns of varying amount of content. There were suggestions in the web to use vertically continuing background image with the colors of the columns or an additional Javascript, which finds the highest column and sets the same height for the others. But these variants were too limited and too heavy (let’s leave the Javascript for more important functionality that the presentational tweaking). Just a few days ago a colleague working with HTML templates, showed me a better solution by Alex Robinson.

My terminology in this text is as follows: a container is an HTML element which children will be called columns when they’re visually laid out horizontally next to each other. The standard examples of containers and columns could be those:

• Page layout horizontally divided into, let’s say, three parts. Three div elements wrapped by the fourth div.
• Horizontally displayed navigational menu. The element ul with its kids li.
• Gallery photos drawn into a grid. div elements as small containers of photos with their descriptions and links laid out in another div representing a row.

The elements called columns are drawn up horizontally by CSS in all of those cases: they have defined widths and are moved to the left or right side by float: left or float: right. That’s enough talking about column layouts. Let’s have a look at the problem and its solution.

You might think, that you can set equal heights for different columns by the CSS parameter height, but you should take in mind that the visitor of the website can change the text heights at the View → Text Size settings. The times of static websites are over and nowadays usually we work with varying user-generated content. So the column will have a varying height which will depend on the amount of containing content by default.

The solution by Alex Robinson is to define an insanely huge bottom padding padding-bottom for a column and then to distract the distance by a negative bottom margin margin-bottom. In case you forgot the CSS box model, I remind you, that the background of an HTML element belongs to the content itself and to its padding. If you define overflow: hidden to the container of the columns, the elements will look visually of the same height. The size of the insanely huge padding should be such a height which is never smaller than the content of the column. So if we are talking about menu items of 1 to 3 rows of text, then 100px is enough.

#block_A, #block_B, #block_C {
	padding-bottom: 32767px;
	margin-bottom: -32767px;
	}
#container {
	overflow: hidden;
	}

You can read about different exceptions of this trick in different browsers at Position Is Everything. There are also some other interesting solutions which I’m gonna check (but I won’t write a separate post about that ). The varying heights should be taken in mind not only by template creators, but also by the graphical web designers. But that’s already another theme.. And I’m gonna bake Kūčiukai now.