I am trying to extend my left sidebar so that it spans the length of the page (or the container DIV). I tried setting the height of the container to 100% and then the height of the sidebar to 100%, but that did not work.
Here is my coding:
div#container
{
overflow: hidden;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
padding-bottom: 10px;
width: 880px;
height: 100%;
text-align: left;
}
div#left
{
float: left;
width: 280px;
height: 100%;
padding: 4px;
background: #F1D7A5;
}
And here is what the page looks like: http://www.studentbridges.org/new/
Any input on how I can extend the sidebar would be greatly appreciated!
Thank you!
~Noelle
I usualy solve this problem by putting the background of the sidebar as an image on the container of the sidebar, and repeating it along the y-axis. This does not actualy strectch your sidebar, but it looks the same.
In your case you could just take a printscreen of your page as it is now, crop it to 1px height and 880px width, and setting it as the background of your #container:
background: url(<path_to_image>) repeat-y center;
You can also remove the background from #left then.
Everything to avoid using tables!