#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:

Comments

  1. User Avatar
    Alfred Larsson
    Permalink to comment#

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

    • User Avatar
      Johan Nilsson
      Permalink to comment#

      Very late to the party; just going through old podcast episodes that seem to have slipped through the cracks.

      Alfred, since it’s only visually important to vertically extend the background on the sidebar, it is okay to do what Chris has done. It’s totally unimportant for the content or to someone who doesn’t process the webpage visually how tall the sidebar background is.

  2. User Avatar
    Tomas Jerabek
  3. User Avatar
    shadyyx
    Permalink to comment#

    Hi.

    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.

    Peter.

  4. User Avatar
    YING WAN
    Permalink to comment#

    Great tricks, really like it.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag