Grow your CSS skills. Land your dream job.

Help with sidebar height

  • # June 24, 2009 at 12:04 pm

    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;
    }
    # June 24, 2009 at 12:25 pm

    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.

    # June 24, 2009 at 12:38 pm

    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 :)

    # June 24, 2009 at 5:18 pm

    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

    # June 24, 2009 at 6:49 pm

    I tried that and unfortunately it did not work :(

    # June 24, 2009 at 10:30 pm

    google "faux columns", thats your best bet.

    # June 25, 2009 at 11:59 am

    Thanks got it figured out!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".