Grow your CSS skills. Land your dream job.

#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. Alfred Larsson
    Permalink to comment#

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

  2. 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.

  3. YING WAN
    Permalink to comment#

    Great tricks, really like it.

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

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