Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

Tags

General HTML

2010062701 Email to Ronx
 

Faux Columns

Creating equal height columns with CSS


How to make all columns in a multi-column design appear to be the same height.

Consider the layout created by:

<div style="border:black 1px solid;padding: 5px;">
<div style="float:left; width:120px;background:#ddd;">left column</div>
<div style="float:right;width:120px;background:#ddd">right column</div>
<div style="padding:5px;">Main content goes here</div>
<div style="font-size:1px;line-height:1px;clear:both;">&nbsp;</div>
</div>

which renders as:

left column
right column
Main content goes here
 

This works without too many problems but will break (columns will appear to be different lengths) if one column is taller than another after content is added:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus magna, consectetur eu eleifend sit amet, condimentum ac massa.

right column
Main content goes here
 

If the main content area is also larger, the result will be:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus magna

right column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus magna, consectetur eu eleifend sit amet, condimentum ac massa. Maecenas at diam eu est scelerisque facilisis id sit amet ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vitae risus cursus dui pulvinar rhoncus at et velit. Cras nulla velit, pellentesque ut ultricies eget, sodales eget arcu. Morbi sed nunc quis urna condimentum imperdiet. Ut nec justo sed ligula interdum egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

 

To guard against this add margins to the main content area (the left and right columns are constrained by their "width" attributes.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus magna
right column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus magna, consectetur eu eleifend sit amet, condimentum ac massa. Maecenas at diam eu est scelerisque facilisis id sit amet ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vitae risus cursus dui pulvinar rhoncus at et velit. Cras nulla velit, pellentesque ut ultricies eget, sodales eget arcu. Morbi sed nunc quis urna condimentum imperdiet. Ut nec justo sed ligula interdum egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

 

But, in both cases, if the backgrounds are different, the columns do not appear to have the same height.

If the left and right columns have the same, solid background colour this affect can be achieved by adding the background colour to the wrapping div (bordered in red in these examples), and also setting the background of the center column to its own background colour (which may be the same as the rest of the page) :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus magna
right column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus magna, consectetur eu eleifend sit amet, condimentum ac massa. Maecenas at diam eu est scelerisque facilisis id sit amet ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vitae risus cursus dui pulvinar rhoncus at et velit. Cras nulla velit, pellentesque ut ultricies eget, sodales eget arcu. Morbi sed nunc quis urna condimentum imperdiet. Ut nec justo sed ligula interdum egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

 

The code is now:

<div style="border:red 1px solid;padding:0 5px;background:#ddd;">
<div style="float:left; width:120px;background:#ddd;padding:5px;">left column</div>
<div style="float:right;width:120px;background:#ddd;padding:5px;">right column</div>
<div style="padding:5px;margin:0 130px;background:white;"><p>Main Content</p></div>
<div style="font-size:1px;line-height:1px;clear:both;">&nbsp;</div>
</div>

What if all three columns have different backgrounds? If the page has a fixed width design, then the solution is to either use a background image which has appropriate colours for the columns, or use the method described below for a floating layout. These images need only be a few pixels high.

For the first case (single image for all three columns) the image must be the correct width, with each colour band the correct width for the appropriate column. The background image serves as the background for the page container.

For a floating width design add an extra <div> to accommodate an extra background image:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus magna

right column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus magna, consectetur eu eleifend sit amet, condimentum ac massa. Maecenas at diam eu est scelerisque facilisis id sit amet ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vitae risus cursus dui pulvinar rhoncus at et velit. Cras nulla velit, pellentesque ut ultricies eget, sodales eget arcu. Morbi sed nunc quis urna condimentum imperdiet. Ut nec justo sed ligula interdum egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

 

In this example the image behind the right column must be wide enough to cover the column at its maximum possible width. The example sets the right column at 15% of the space available- this could amount to 300px or more on a wide monitor and has to be made accordingly. The height can be as little as 2px.

 <div id="outer" style="width:90%;margin:0 auto;border:red 1px solid;
background:#ddd;">
<div id="inner" style="padding:0 5px;background:url(/images/cyan120.gif)
 right top repeat-y;">
<div style="float:left; width:20%;padding:5px;">
<p> left column </p></div>
<div style="float:right;width:15%;padding:5px;">right column</div>
<div style="padding:5px;background:white;margin:0 17% 0 22%;">
<p> Main Content goes here </p></div>
<div style="font-size:1px;line-height:1px;clear:both;">&nbsp;</div>
</div>
</div>

Important: Do not set any height attributes on the <div>s. The result will be a mess if and when users adjust their text settings to be able to read the page easily - not everyone has good eyesight, or the monitor may be very high resolution with large fonts in use. An example of the possible chaos is below - adjust the text size (View->Text size in IE, ) to see the effect.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus magna

right column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus magna, consectetur eu eleifend sit amet, condimentum ac massa. Maecenas at diam eu est scelerisque facilisis id sit amet ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vitae risus cursus dui pulvinar rhoncus at et velit. Cras nulla velit, pellentesque ut ultricies eget, sodales eget arcu. Morbi sed nunc quis urna condimentum imperdiet. Ut nec justo sed ligula interdum egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

 

This space intentionally blank