4 ways to create blocks of the same height

Previously, when everyone typeset using tables, creating columns of the same height was very simple. It is enough to create a table, for example, with 3 columns and all of them will automatically have the same height. But the block layout is not so simple.
In this article, I will tell you about some ways to create columns of equal height and the compatibility of these methods with browsers (including IE6). All of these methods describe the creation of a 3-column layout.

Method 1. Using the display: table property

To implement the layout, a list ( ul) or a block divwith nested blocks for a row and each of the columns is used. The framing block is divassigned a value display: table, and each nested column block has a display: value table-cell.
Consider a list example.
HTML code:

• .....Lots of Content....


• .....Lots of content....


• .....Lots of content....

CSS:

.base {
/*make it 100% width and a minimum of 1000px width*/
width: auto;
margin-left: 0px;
margin-right: 0px;
min-width: 1000px;
padding: 0px;
display:table;
}
.base-row {
Display: table-row;
}
.base li {
display: table-cell;
width: 33%;
}
.cell1 {
background-color: #f00;
}
.cell2 {
background-color: #0f0;
}
.cell3 {
background-color: #00f;
}

View example

Benefits:

This is the easiest and easiest way to create columns of the same height, unlike other methods.
An external indent ( marginas cellspacingfor tables) equal for all columns cannot be created, however, it can be replaced by a white border (or the background color of the column) with the appropriate width to simulate the indent.

Disadvantages:

This method does not work in browsers IE7 and below. It will be a long time (when IE7 becomes the new IE6) before we can safely use this method.

Method 2: Using JavaScript

This method is based on the use of small JS code (jQuery), which “arranges” the desired height for each column based on the height of the longest one.
HTML code:

… Lots Of Content …

…. Lots Of Content …

… Lots Of Content …

CSS:

.container {
Width: 900px;
Margin-left: auto;
Margin-right: auto;
}
.leftsidebar {
Float: left;
Width: 33%;
}
.content {
Float: left;
Width: 33%;
}
.rightsidebar {
Float: left;
Width: 33%;
}

JavaScript (jQuery):

function setEqualHeight(columns)
{
var tallestcolumn = 0;
columns.each(
function()
{
currentHeight = $(this).height();
if(currentHeight > tallestcolumn)
{
tallestcolumn = currentHeight;
}
}
);
columns.height(tallestcolumn);
}
$(document).ready(function() {
setEqualHeight($(".container > div"));
});

You can put the JS code in a separate file and call it directly in the HTML code. In this case, the jQuery initialization should be located above the code.
The code you need to change is the name of the block class that creates the columns. In this example, this is a class container:

.container > div

You can change the class name of a block with columns, or even add a class to each column block and use them separately for convenience.

View example

Benefits:

The main advantage of the method is that it works in all browsers and you do not need to strain with CSS code to level the height.

Disadvantages:

If JavaScript is disabled, respectively, the columns will not be of equal height. But, as a rule, this is a very rare case, because most modern sites require the inclusion of JS.

Method 3: Artificial Columns

This method was invented by one of the first to implement columns of the same height. Its essence is that the framing block is assigned a background that mimics the columns (see. Fig. Below). They simply overlap this background. The effect of equal height is created due to the repeating background.



HTML code:

CSS:

.container {
background-image: tile.png;
background-repeat: repeat-y;
width: 900px;
margin-left: auto;
margin-right: auto;

}

.leftsidebar {
float: left;
width: 200px;
}

.content {
float: left;
width: 400px;
}

.right {
float:left;
width: 300px;
}

.clearer {
clear: both;
}

View example

Benefits:

Very simple implementation.

Disadvantages:

This method can only be used for fixed-width layouts / columns.

Method 4: Use split blocks with background

This method is based on the use of separate div blocks, each of which has its own background and takes the height value of the element that it includes.
HTML code:

…Lots Of Content…

…Lots Of Content…

…Lots Of Content…

CSS:

.rightback {
width: 100%;
float:left;
background-color: green;
overflow:hidden;
position:relative;
}
.contentback {
float:left;
background-color:blue;
width: 100%;
position:relative;
right: 300px;    /* width of right sidebar */
}
.leftback {
width: 100%;
position:relative;
right: 400px; /* width of the content area */
float:left;
background-color: #f00;
}

.container {
width: 900px;
margin-left: auto;
margin-right:auto;
}

.leftsidebar {
float:left;
width: 200px;
overflow:hidden;
position:relative;
left: 700px;
}

.content {
float:left;
width: 400px;
overflow:hidden;
position:relative;
left: 700px;
}

.rightsidebar {
float:left;
overflow:hidden;
width: 300px;
background-color:#333;
position:relative;
left: 700px;
}

It doesn't look easy, does it? The main thing to understand 5 main points:

1. .rightback, .contentback, and .leftback contain .leftsidebar, .content and .rightsidebar elements, which in turn contain text.
2. Each of the nested blocks is responsible for the color / background of the column. In this example,
   .leftback corresponds to
   .leftsidebar , .contentback to .content
   and .rightback to .rightsidebar.
3. In addition to the latter (responsible for the rightmost column), each of the blocks
   the indent on the right is set equal to the width of the element adjacent to the right that contains the background. In this example, the .contentback (responsible for the background .content) is shifted to the left by 300px (which is the width of the .rightsidebar block). (see the figure below)
4. The .leftsidebar, .content and .rightsidebar columns are arranged one after another with a certain width.
5. They provide an indent on the left equal to the sum of the width of each of the columns, except the extreme right. Those. they are equal = width .rightsidebar (300px) and .content (400px) = 700px. (B + G)

The image below shows how the .rightback, .contentback, and .leftback blocks are arranged. The far left is .rigthback, the far right is .leftback.

The dashed line shows the visible area of ​​the columns (the .rightback block is trimmed with overflow: hidden).
In the picture below, the black lines below the red are the content of the elements