0

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

nellygrl
  • 657
  • 1
  • 16
  • 34

2 Answers2

0

Setting the height to 100% restricts the height of the container. If you set the container to the pixel height you'd like it to be, the sub-div will extend its height to match. Because your lower div is a sub-div of its container, height: 100% will only result to the remaining length left in the container div, as you can see.

Austin
  • 1,087
  • 3
  • 14
  • 27
  • But the container has a variable length based on what page someone is viewing. And still, the container is longer than the siebar even though the sidebar is set to 100%. Maybe I'm not understanding you. – nellygrl Jul 27 '12 at 20:20
  • your #left div not directly inside #container, it is inside #contbg inside #container, and #contbg is only given what space of #container is not occupied by #header. – Austin Jul 27 '12 at 20:26
  • Oh. I thought if I set them all to 100%, it would extend down the page. I guess not. Do you know how I can remedy this? Or am I just fresh out of luck? – nellygrl Jul 27 '12 at 20:33
  • you can put the #left div directly inside the #container div.. but if you want the #left div to be to the left of your content I would probably make a table within you #container with columns #left, #(rest of #container) – Austin Jul 27 '12 at 20:41
  • The issue there is that the contbg div is what is making the background color yellow. And I really didn't want to resort to using tables... uggg. Thank you though! – nellygrl Jul 27 '12 at 21:02
  • If this solved your question, please remember to vote or select an answer – Austin Jul 30 '12 at 17:48
0

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!

Pevara
  • 14,242
  • 1
  • 34
  • 47