Here are two methods that I have used to make a website’s sidebar extend for the entire length of it’s container.

Typically, a sidebar <div> ends once it reaches the end of the content inside it, which becomes an issue when the main content of the page is longer than the content in the sidebar.

Example #1: Sidebar background is same color as container background

For this solution, we must use four <div> tags: one which will contain the sidebar, the main content, and a footer. The footer doesn’t need to contain anything if you don’t want it to, it just needs to be there.

First, set up your html page like this:

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

And add your content to the page.

Next, we will style the four different elements we are using. Add these codes to your stylesheet (edit them as necessary):

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

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

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

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

There are two important points to this solution. One is the footer property “clear:both.” If you don’t have the footer (or another div) that contains the “clear:both” property at the bottom of the container, the footer will appear at the bottom of the sidebar, but not necessarily at the bottom of the content, like this:

By using the “clear:both” property, the footer sticks to the bottom of the sidebar and the content. As I said earlier, you don’t have to put anything inside the footer if you don’t want to, but it needs to be there.

The other key element in this solution is that the background of the sidebar is the same color or image as the background of the container. This is because we are not actually extending the sidebar. The sidebar still ends after it reaches the end of its content, but it will appear that the sidebar continues to the end of the container’s content as long as it’s background is the same as the container’s background – which does continue to the bottom.

For instance, let’s say that you changed your stylesheet so that the background of the sidebar was different than the background of the container.

The page would look like this:

But, if you make sure that the background color of the sidebar is the same as the background color of the container, it will look like this:

Example #2: Sidebar background is different than the container background

Now, let’s say that you want the color of the sidebar to be different than the color of the container, like this:

This is possible by adding another <div> to your page.

First, add the styles for the new div your stylesheet:

#newcontent {
width:100%;
background:#969696;
}

Make sure the background of this new div is the same as the background of the sidebar.

Now, set up your web page like this:

<div id="container">
 <div id="newcontent">
<div class="sidebar"></div>
 <div class="content"></div>
<div id="footer"></div>
</div>
</div>

This new div now fills in the “space” at the bottom of the sidebar so, as long as it has the same background as the sidebar has, it will appear for all intents and purposes that your sidebar is actually  extending to the bottom of the container.

I hope these examples have helped to solve your sidebar issues, but be sure to let me know if neither of these solutions work for you or if you have any questions or trouble at all and I would be happy to try and help you come up with a solution.