Help with sidebar height

[rjmccollam]

Hey all i need some help on a project I am working on. How do I get my sidebar height to automatically match my content height? You can take a look at the project at http://freshstartfellowship.com/test to see exactly what I am talking about. Here is my css for my sidebar:

Code:

#sidebar {
width: 241px;
min-height: 690px;
background: #000000 url(images/sidebarbg.jpg) no-repeat top;
float: left;
border-bottom: #000000 solid 5px;
border-left: #000000 solid 5px;
}

[TheDoc]

From a cosmetic point of view, I actually don’t think it needs to go all of the way down, I kind of like it like that.

Normally I like to see a sidebar follow the content, but it really works well being cut off on this site.

If you’re set on having them the same, though, there are tons of threads on this site already that cover it. Just search "equal column height" in the search in the top right.

[rjmccollam]

Thanks for your input and I’m 50/50 on it I don’t think it looks bad, but I will just have to play with it. Thanks for your help :)

[Roughnite]

try this:

#sidebar {
width: 241px;
min-height: 690px;
background: #000000 url(images/sidebarbg.jpg) no-repeat top;
float: left;
border-bottom: #000000 solid 5px;
border-left: #000000 solid 5px;
left: 0px;
top: 0px;
bottom: 0px;
}

since you already have the sidebar and content divs inside a container, this will make the top and bottom stick to the container as it expands, hence making it the same size as your content div. hope that helps

ps- you might have to make the side bar an absolute positioned div for this to work, im not sure

[rjmccollam]

I tried that and unfortunately it did not work :(

[John Harris]

google "faux columns", thats your best bet.

[rjmccollam]

Thanks got it figured out!

[Author]

Posts