Alignment of the height of containers during layout by DIVs

I think that everyone who realized all the advantages of typesetting in front of tabular markings, could not help but pay attention to one, as for me, a significant drawback of the block model. What is it? This is the height of the containers. Working on the next project, I tried several solutions to this problem, with which I want to introduce you in the framework of this article.
Unfortunately, if we use a three- or two-column layout laid out in layers, then in the end the height of the containers will be completely independent of the height of the neighboring blocks. And it will directly depend on the block content and the rules of indent (padding) applied to it. Despite all its shortcomings, the tables, as if by themselves, solve this question by virtue of the connectivity of adjacent columns. In the case of using blocks, we have completely independent containers at the exit.

Sample page with tabular layout

Layout example “in layers”

Sometimes it does not play a special role and the different height of the containers is quite acceptable in the framework of the design concept. But there are cases when it is necessary exactly the same height of the blocks, regardless of their contents. This article is dedicated to the solution of this issue.

So, let's say you need to level the height of the containers regardless of their contents. There are basically two ways to do this. The first is solely in the design decision, and the second in the application of javasript.

Using CSS exclusively

So, the first method is called "False columns" and its essence is very simple and banal. A very good description of this method can be found in the article by Den Sederholm Faux Columns . According to this example, a background image is used, to which vertical repetition is applied, and as a result the effect is the same height of the columns.
Here is an example of CSS:
background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;
This option is well suited for pages with a fixed width. It can also be used for “rubber” layout using the Sliding Faux Columns method adapted by Douglas Baumen and Eric Mayer.
Its essence lies in the fact that the pixel ratio of the width of the columns is first calculated at different resolutions, then all this is converted to percentages, and after the background image that creates the illusion of the column, positioning in percent is assigned according to the calculated data.
Reception can be used for both two and three columns, only in the case of three columns you need to add another nested container to the markup.
A huge plus of this technique is pure CSS. However, it is good, then when in the concept of your design, direct borders of containers are applied. But, unfortunately, this technique cannot be applied to a design in which blocks have tailored (rounded) corners.

CSS + Js

In the case of the use of rounded corners, I could not do without the use of javasript.
There are many variations of scripts to solve the problem of column heights. I chose three scripts that can be used in different solutions for various tasks.

1. CSS Equal Columns Height script (v1.01) - literally a script of equal height of columns

I dug it out in the bins of www.dynamicdrive.com it is widely used in the framework of ready-made basic markup, which are presented on the site as templates.
It is applied very simply. You need to copy the “ equalcolumns.js ” script itself into the scripts directory, or into the directory that you use for this on your website. And then register the link to the script in the page code between:

In order for the script to work exactly in your layout, you need to change the basic settings in the script file itself here:
ddequalcolumns.columnswatch = [”leftcolumn”, “rightcolumn”, “contentwrapper”]
Accordingly, “leftcolumn”, “rightcolumn”, “contentwrapper” - change the names of your styles.
I tested it personally, in the end I got the result of full support in FireFox 1.0 and higher, Opera from version 7 and Safari. Unfortunately, in IE6-7, a very strange footer trim bug was noticed. Rather, the footer was present, but it could not be fixed within the visible area of ​​the browser window, scrolling + footer size always appeared. However, I tested it on the layout model alone, and it is quite possible that with another version of positioning the containers this error will not occur. Try it on your markup.

1. PVII Equal Height CSS Columns - in principle, too, the name only from other developers and with another version of the script .

The principle of the introduction of the script is standard - between the tags of your code, insert a link to the script:

However, in order for the script to work, you need to add a call to the crypt itself to the tag:
')
The onLoad request contains the choice of including a script (1 = yes, 0 = no) as well as a list of variables, where c1 is the class name or id of the container to which the script is applied, P is the final selector that is used in this container.
In the examples on the developer site itself, everything works great. However, in relation to the dynamic model, the destination of the final selector does not always attract, and the final selector can be changed. Alternatively, insert this selector directly into the markup. But in general, in relation to the markup on which the first script was tested, this one did not work. Again, I note that on a regular static script should work - experiment.
And finally, the third warrant. Which, to me personally, seemed the most attractive and turned out to be operational within the test markup by 100%.

1. Script for selecting the maximum height of the container with the addition of .class, as an argument from Djamil Legato and Andy Miller

Basically, the script itself:
var maxHeight = function(classname) {
var divs = document.getElements('div.' + classname);
var max = 0;
divs.each(function(div) {
max = Math.max(max, div.getSize().size.y);
});
divs.setStyle('height', max);
return max;
}
window.addEvent('load', function() {
maxHeight('sameheight');
maxHeight.delay(500, maxHeight, 'sameheight');
}); <code />

'sameheight' is the name of the class used as an argument. Naturally it can be called as you like.
It is noteworthy that, despite its simplicity, the script works in all browsers without problems. The only condition is to add an argument class for two containers of the one to which you want to assign the height and the one with which it serves as the height reference. Moreover, the standard is calculated automatically by the highest container of the two with the assigned class. Truly - all ingenious is simple.
I think that this is not all of the possible solutions to the problem of equal height of containers, but these techniques seemed to me the most usable. I will be glad to hear your suggestions for solving this problem.
Crosspost from my master-web blog