Background full height of divs

Sidebar

#sidebar div with #left div underneath

This example shows how to place position: absolute divs with background-colors or background-images under the divs which have different content heights so that the backgrounds are equal in height. This method can be used for more than two columns, but they must have fixed widths. You don't need to know in advance which column will need the most height. No javascript is required for this example.

The background-color or background-image would normally end here ._________

Main Content

#mainContent div with #right div underneath

The principle is to code your #sidebar and #mainContent columns normally, both with float: left to be beside each other, without a background-color or background-image and without a height so that if more content is added or text size is increased, the divs will expand vertically. If left like this, one will be shorter than the other if no height is stated.

If you code two position: absolute divs with height: 100% with the background-color or background-image you can place these under the #sidebar and #mainContent divs with the same widths and make the #sidebar and #mainContent divs show on top by giving them z-index: 1; provided that they also have position: relative; then they will show the background from the position: absolute divs underneath.

The position: absolute divs need to repeat the side borders because one of them will extend lower than the div that it is underneath. Neither #sidebar nor #mainContent should have a border-bottom because one will be shorter than the position: absolute div underneath. The #sidebar and #mainContent divs should have a border-top while the position: absolute divs should not have a border-top because they actually extend under the #header which covers them.

The #sidebar is 200px wide with padding 2*8px totalling 216px with 2*3px side borders so the position: absolute #left div also needs to be 216px wide with 2*3px side borders and with left: 20px to match the #sidebar's margin-left: 20px.

The #mainContent needs to be the remainder of #container's 770px, or 770 - 200 - 2*8 - 2*3 - 20 = 528px, made up of a basic 466px + 2*8 padding and 2*3 side borders = 488px and with a margin-left: 20px to create a middle space and margin-right: 20px, totalling 528px.

The position: absolute #right div needs to be the #mainContent 466px plus 2*8px = 482px with 2*3px side borders and its left position needs to be the total of #sidebar = 216px + 2*3 + 20 = 242px plus #mainContent's margin-left 20px = 262px so that it sits neatly under #mainContent.

If you have a separate header then this also needs a z-index to cover up the position: absolute divs and will need its own background-color or background-image to avoid showing the background of the position: absolute divs.

The footer can be treated the same way as the header with a z-index or, as in this page code, the position: absolute divs are give a bottom: *px; position to stop them above the footer.

A space is required above the footer and is provided by a <p> tag with &nbsp; inside.

IE6 doubled the margin-left in #sidebar so I inserted a left style instead
* html #sidebar { left: 20px; margin-left: 0; }
which only applies to IE browsers less than IE7. This meant I had to make an edit to the margin-left of #mainContent to move it further to the right
* html #mainContent { margin: 0 0 0 40px; }

Look at the source code of this page.

© Wickham 2008 - Footer