Matching column height

  • I am using a custom 2 column theme, the strictly the navigation on the left and content on right.

    What I am trying to accomplish is having the sidebar one color and the content a different. The problem I run into is when the navigation has a taller height compared to the content, the #wrapper shows (which I have it to match the color of the navigation, for when content is longer than navigation). I have tried making #content 100% height, but it still does not work.

    Here’s a visual of what I currently get:
    (x=header & footer; 0=navigation & wrapper; |=content)

    xxxxxxxxxx
    000|||||||
    000|||||||
    0000000000
    xxxxxxxxxx

Viewing 1 replies (of 1 total)

  • You want to wrap your navigation in a DIV and float it left – set a width on it. Then wrap your content in another DIV and float it either left or right. Then the two sections will be independent of each other, so you can style them as you need to. If you need to adjust the height of the lines on one or the other so they match you can apply padding to the entries in one of these DIVs

    These two DIVs should be inside the Nav/Contents area wrapper

Viewing 1 replies (of 1 total)
  • The topic ‘Matching column height’ is closed to new replies.