#5: Columns of Equal Height: Super Simple Two Column Layout

Forcing multiple columns to be of equal height is one of those tricky things in web design. In this screencast I'll show you a little trick around it. Instead of making the actual elements themselves equal height, we'll use a background image to "fake" the look of equal height columns.

Links from video:


  1. Alfred Larsson
    Permalink to comment#

    This seems a little un-semantic. There must be another way, right?

  2. Tomas Jerabek
  3. shadyyx
    Permalink to comment#


    This was quite good, but unfortunately useless as nowadays there is almost no layout that would take its height and width across all the screen. Usually we have only 980px width area that is centered on the screen, with some header, two-three columns and a footer area. I can imagine of having some content wrapper (between the header and footer) area tha would have styles applied all the way You did to the body, but I don’t think that using a bg image for that is the best way…

    Anyway, watching You videos I want to ask a question: when You cut of some background image that should be x or y repeated You almost always cut it of somehow big to me. I intend and prefer the horizontaly repeated images to have the width of 1px (and verticaly height of 1px) to have this bg image as small as possible. Why do You cut these images so “big”?

    Thank You for Your reply, Chris.


    Permalink to comment#

    Great tricks, really like it.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.