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:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

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