Grow your CSS skills. Land your dream job.

Sidebar isn’t flush with main content

  • # July 13, 2009 at 1:06 pm

    I have been struggling with this problem for a while and have posted in other forums with no solution. Hopefully someone has one here.

    I am using a template from Dreamweaver CS3 – the three column fixed. It comes with a sidebar1 on the left, main content in the middle, and sidebar2 on the right. My issue is with the height of the sidebars. They do not extend to always be flush with the main content. For example, if the middle main content extends past the content of the sidebars, the sidebars remain where they are, appearing shorter. This is a problem when I have the sidebars a different background color than the main content.

    The template says "The background color on this div will only show for the length of the content. If you’d like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content." I don’t see how this fixes things.

    I have tried setting the div height to 100% and in other areas and it has not worked. Right now I’m having to set the height manually in pixels on each page to stay flush with the main content. I’m sure there is an easier way to do this automatically.

    Any thoughts or suggestions?

    Thanks!

    # July 13, 2009 at 3:01 pm

    There are TONS of solutions for this, including many outlined in this very forum! Search is your friend! So is Google!

    Throw this into a search on Googs:

    "equal height column css"

    # July 13, 2009 at 5:19 pm

    if your 3 divs are inside a container div, i would recommend trying to "stick" the divs to the top and bottom of the container div

    for example:

    Code:
    content
    content
    content

    css:

    Code:
    #box1 {
    left: 0px;
    top: 0px;
    bottom: 0px;
    }
    #box2 {
    top: 0px;
    bottom: 0px;
    }
    #box3 {
    top: 0px;
    right: 0px;
    bottom: 0px;
    }

    theres definately a bit more to this css code (margins, floats etc) but thats basically how it should work, unless i am mistaken

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

You must be logged in to reply to this topic.

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