4 ways to create blocks of the same height

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

Method 1. Using the display: table property

To implement the layout, use a list ( ul ) or a div block with nested blocks for the row and each of the columns. The framing div assigned the value display: table , and each nested column block is assigned display: table-cell .
Consider an example with a list.
HTML code:

<div class=”base”>
<ul class=”base-row”>
<li class="cell1"><div class="content1" >.....Lots of Content....</div></li>
<li class="cell1"><div class="content2">.....Lots of content....</div></li>
<li class="cell1"><div class="content3">.....Lots of content....</div></li>
</ul>
</div>

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;
}

See an example

Benefits:

This is the easiest and easiest way to create columns of the same height, unlike other methods.
External indenting ( margin like cellspacing for tables) equal for all columns cannot be created, however, it can be replaced with a white border (or background color of the column) with the appropriate width to simulate the indentation.

Disadvantages:

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

Method 2: Use JavaScript

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

<div class=”container”>
<div class=”leftsidebar”> … Lots Of Content … </div>
<div class=”content”> …. Lots Of Content … </div>
<div class=”rightsidebar”> … Lots Of Content … </div>
</div>

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 initialization of jQuery 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 the container class:

.container > div

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

See an example

Benefits:

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

Disadvantages:

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

Method 3: Artificial speakers

This method was invented by one of the first to implement columns of the same height. Its essence is that the background block imitating the columns is assigned to the framing block (see the figure below). They are simply superimposed on this background. The effect of equal height is created by repeating the background.



HTML code:

<div class=”container”>
<div class=”left”></div>
<div class=”content”></div>
<div class=”right”></div>
<div class=”clearer”></div>
</div>

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;
}

See an example

Benefits:

Very simple implementation.

Disadvantages:

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

Method 4: Use separate blocks with background

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

<div class=”rightback”>
<div class=”contentback”>
<div class=”leftback”>
<div class=”leftsidebar”>…Lots Of Content…</div>
<div class=”content”> …Lots Of Content…</div>
<div class=”rightsidebar”> …Lots Of Content…</div>
</div>
</div>
</div>

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;
}

Looks not easy, is it? The main thing to understand the 5 main points:

1. .rightback, .contentback, and .leftback contain the elements .leftsidebar, .content and .rightsidebar, which, in turn, contain the text.
2. Each of the nested blocks is responsible for the color / background of the column. In this example
   .leftback meets .leftsidebar,
   .contentback - .content
   and .rightback - .rightsidebar.
3. In addition to the last (responsible for the rightmost column), each of the <div> blocks is indented on the right, equal to the width of the element adjacent to the right, which 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 figure below)
4. The .leftsidebar, .content and .rightsidebar columns are arranged one behind the other with a specific 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 located. The one on the far left is .rigthback, the one on the far right is .leftback.

The dashed line shows the visible area of ​​the columns (the .rightback block is clipped using overflow: hidden).
In the image below, the black lines below the red are the content of the <div> .leftsidebar, .content, and .rightsidebar elements, if they are set to the float: left property and the corresponding width.
All 3 elements have an offset to the left of C, using the relative position.
C = B + G

This method is described in detail in this article .

See sample for 3 column layout | See an example for a 4 column layout.

Benefits:

The method works in all browsers, including Internet Explorer 6. The implementation does not require JavaScript, it is completely based on CSS and HTML.

Disadvantages:

The method is not as simple as the others, however, it allows you to create as many equal height columns as required.

Conclusion

Each of the methods has its advantages and disadvantages, but for sure you choose the last method for yourself, which allows you to create columns of equal height that work in any browser without JS.