Super Simple Two Column Layout

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!


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.