Problem setting height for sidebar

[shaunie]

Hi,

 

Can anyone help with the gap appearing in the sidebar on this page please?

 

http://www.bhvs.org.uk/index2.php?action=about-us

 

I have tried setting the height to 100% but it doesn't work, any ideas why this is?

[Amit20]

Test your Code in firebug. When you increase your height in firebug console the height of sidebar indeed increases.

 

try min-height:460px around. Hope it helps!

[shaunie]

Hi,

 

Thanks for your reply, that does work, however I need to keep the minimum height at 380px for the other pages. I was hoping it could stretch beyond this height if necessary...

[cssfreakie]

Hi shaunie,

 

The easiest way with the setup you have is to use an image on the container div (#content) and remove the background color and border of #sidebar.

so your css could look like this.

 

#content {
    background: url("http://i51.tinypic.com/11qpojq.png") repeat-y; /* this is an image of 170px with your same colors */
    clear: both;
    float: left;
    height: 100%;
}
#content #sidebar { /* removed the color and background */
    float: left;
    min-height: 400px;
    padding: 10px;
    width: 160px;
}

 

I quickly made an image that does the same as that background color and border, but allows you to increase the height of your page to whatever value you like. you can find/use/download it here: http://i51.tinypic.com/11qpojq.png

 

good luck!

 

cssfreakie

[shaunie]

Works great thanks