Sidebar Div extend entire height of container

Question

I have one container div holding two sidebars on each side and a content box in the middle. Standard 'blog' layout. The content is way past the sidebars, and the sidebar height stops at my last sentence. How can I extend the height so that is auto extends to the bottom of the page, thus the end of the content box in the middle?

Answer 1

Unfortunately, there is no fool-proof way of achieving this.

One way to do the following without using JavaScript is via a technique called Faux-Columns.

It basically involves applying a background-image to the parent elements of the floated elements which makes you believe that the two elements are the same height.

More information available at:

A List Apart: Articles: Faux Columns

Answer 2

Basically you can't. If you're trying to get a design element (say a background image) to extend all the way to the bottom, the best way is to fake it. What I mean by this is create a wrapper that wraps all your sidebars and content and make your background image the background of that wrapper. Then it will extend all the way to the bottom.

Another way to do this, if you really want (cringe) is to use tables. But please don't.

Answer 3

Take a look at CssPlay.co.uk

Answer 4

I have run into this issue several times on different projects, but I have found a solution that works for me. You have to use four div tags - one that contains the sidebar, the main content, and a footer.

First, style the elements in your stylesheet:

#container {
width: 100%;
background: #FFFAF0;
}

.content {
width: 950px;
float: right;
padding: 10px;
height: 100%;
background: #FFFAF0;
}

.sidebar {
width: 220px;
float: left;
height: 100%;
padding: 5px;
background: #FFFAF0;
}

#footer {
clear:both;
background:#FFFAF0;
}

You can edit the different elements however you want to, just be sure you dont change the footer property "clear:both" - this is very important to leave in.

Then, simply set up your web page like this:

<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>

I wrote a more in-depth blog post about this at http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container. Please let me know if you have any questions. Hope this helps!

Answer 5

Hi,

You're right! Good catch - the 100% height declarations are not necessary! thanks :) the two most important things are that the background image or color of the sidebar is the same as that of the container, and that the bottom div ("footer" in this example) has the property "clear:both". I think everything else can be edited as much as you want...