Grow your CSS skills. Land your dream job.

Super Simple Two Column Layout

Published by Chris Coyier

supersimple2column.jpg

Reader Blake writes in:

What I'm trying to do is a fairly standard 3 section layout. The header needs to be 75 pixels in height and 100% in width. Below that, I need a sidebar section 160px wide and a main content block that fills up the rest of the width. So far, fairly standard... nothing too complicated. Here's the part that I can't get to work correctly: I want the sidebar and main content blocks to fill up the rest of the screen, even if there is not content to force it. At the same time, I really don't want the scroll bars to appear if there's not additional content that needs to be scrolled for (so, just setting the bottom 2 div's heights to 100% and dealing with the extra 75px isn't ideal. So, essentially what I need is something like "min-height: 100% - 75px;", but unfortunately, that doesn't work.

I can accomplish this layout easily with tables or frames, but I'm really striving for 100% CSS styling if possible. I've searched your archives and the web, but I can't seem to find a decent example using CSS. If you have any suggestions, I'd much appreciate it.

Essentially what Blake is struggling with here is the "columns of equal height" problem. You can either have elements that are relative to their content or you can set a static height. Either way is not ideal, especially when all Blake wants to do is "fill the screen"

The solution is "faux columns". Plainly put, columns that look like columns just because of a background image. Then just leave your sidebar with a transparent background and let it grow however it needs to.

I put together a quick example for Blake, which is also downloadable if anyone wants to snag it and take a look. The only instruction of his I didn't follow was the 75px header. Setting a static height like that is bad news when font size gets increased by the user. So, I just came close with font-size / margin / padding and now it will expand as necessary.

[VIEW EXAMPLE]

Comments

  1. The faux columns are such a life saver…

    Now to make this really tricky how do you get the content to appear first in the code and then the sidebar content?

  2. Permalink to comment#

    Float your id RIGHT right and float your LEFT left. I don’t think it matters which comes first.

  3. Yep, that’ll do the trick, thanks Chris S.! The only thing you lose doing it this way is the “fluid width” of the main content area. In this case, it’s probably better that way anyway.

  4. Permalink to comment#

    I wonder if you could just put an anchor (perhaps a hidden link??) as the very first link that links to the main heading of the main-content div. I wonder if that would help with SEO?

  5. So how would one go about adding a Footer?

  6. JSquirrel
    Permalink to comment#

    I’m really confused, what if the fake column doesn’t have a fixed with?
    And yes, what about a footer?

    ps. I know this post is kind of late…

  7. Karthikeyan Raju
    Permalink to comment#

    Thanks Great Post :)

This comment thread is closed. If you have important information to share, you can always contact me.

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