Height of a sidebar in a website

[Howlin1]

For a college assignment I was required to make a website. It is after getting graded but I would like to continue to at least try to improve my site. One of the problems I had was the height of the sidebars.

I have used css to a certain extent.

But what I would like to know is; how to change

this

 

to this

 

Essentially I want the sidebars in the first link to extend down to the bottom of the users browser like in the second link. At the moment I have that working with some javascript and I have heard this problem can be solved using css and html only.

 

[haku]

http://www.cssstickyfooter.com/

[Howlin1]

While that does make the footer stick to the bottom of the browser, it doesn't make the sidebars go down to the footer. Example

[haku]

Ahh, you're right.

 

The solution for that is a little tricky. You have two options:

 

1) set the background color of your .wrap div to #706D68. This isn't exactly what you want though, as the columns then kind of stop being columns (try it and you'll see what I mean).

 

2) create a background image a few pixels high that has the width of your content. Set the image to be the column colors and the content color, and set that as a background to your .wrap div. That will extend it down to the bottom.

[Howlin1]

Thank you so much! I was able to get it done in the end. It took me a bit longer than I had thought it would but nonetheless it's done now. Thanks alot!