Purely CSS – Faking Different Color Columns

Purely CSS – Faking Different Color Columns


The Goal

We want to create a layout with two columns, each a different color, yet have both colors extend the the edge of the browser.

If you would like to see an example of this, check out One Mighty Roar – try resizing your browser and notice that neither color stops short of the window edge.

Note: This is a technique intended for people that want a multi-colored column fixed width (eg. 960px) layout. You would likely use different techniques for a completely fluid layout.

The Basics

The secret behind this technique is an 3000 pixel width background image (don’t worry about file size – it’s only 360 bytes).

This image will be the background of the element that contains our two columns. Since it extends beyond even a 30″ resolution (2560 pixels wide), it will effectively fill in the gaps in color between the edges of our two columns and the edge of the browser window.

The HTML

In order to keep this as flexible as possible, we will make the image the background of a div, rather than the body. This will allow you to add a banner and footer, without sacrificing the ability to change the background color.

The CSS

Here are the bullet points of what will happen:

  • The sidebar will have the same color background as the left half of the background image
  • The main column will have the same color as the right half of the background image
  • The background image will repeat only on the y-axis and be centered
  • When the window is resized, it will appear as though the columns are adjusting, when in fact they are just covering the split background image.

Note: When you plug in content you can remove the fixed heights in #sidebar and #main-column.

The Files

EDIT: Thanks to David for pointing out that Dan Cederholm published a similar tutorial back in 2004, using this technique to do columns vertically.

Posted Wednesday, March 24th, 2010 · Back to Top

SPONSOR

Add Comment

28 Comments 4 Mentions

  1. Sid Author Editor

    TFS ;) .. Nice

    ·

  2. Melody Author Editor

    You guys are awesome in providing examples of subtle ways to dramatically improve a design…and this is another one–very nice :)

    ·

  3. David | WebModia Author Editor

    hey Sam – I applaud you writing up tutorials on foundational CSS techniques for those who are just learning this stuff (and there will always be folks just learning…)

    But I want to just point out that this relatively simple technique was definitively written about back in Jan 2004 – see the “Faux Columns” (google it) article by Dan Cederholm, over on A List Apart.

    Again, I totally respect that you are probably writing for a target audience that is younger and which perhaps was not aware of these original resources (I’d hazard to guess a good chunk of your readers probably weren’t even out of high school back in 2004 ;) – and so it is always great to have these techniques re-exposed and spread to the larger community of “next generation” web designers.

    Just thought it’d be proper to give credit where credit is due, as certainly we all owe a huge debt to the “gurus” who came before us.

    ·

  4. Sam Dunn Author Editor

    @David
    Thanks so much for pointing that out, I was not familiar with that article, although I am quite a fan of Dan Cederholm. I’ve tagged it on the end of the post.

    ·

  5. David Author Editor

    @David: Having been a web designer since 1994… that was my first thought as well. Although, the idea of the background image being 3000 pixels wide so that the column colours extend out to the left and right as well as vertically is a neat little twist. The only thing I don’t quite understand is the need for the 100% wrapper. Couldn’t you just hook your background on to html or body?

    ·

  6. drivel Author Editor

    The “Purely CSS” threw me off, I thought you had discovered a way to fake a column without using images. Good writeup nevertheless. :P

    ·

  7. Hunter Satterwhite Author Editor

    Good tutorial. I was wondering when you two were going to throw up a new post.

    ·

  8. Beth McLain Author Editor

    well written tut. Thanks..

    ·

  9. Avinash Author Editor

    Hi sam !!

    This tut seems to be simple , but its really amazing one !
    Thanks for sharing !
    keep it up :)

    ~Avinash

    ·

  10. xomero Author Editor

    why “text-align:center;” in the “#content-wrapper” class. I think its irrelevant

    ·

  11. Soh Tanaka Author Editor

    Very cool~ I have a similar effect layering two divs: http://ow.ly/1qYZf

    just another approach to this effective technique!

    ·

  12. Matthew Author Editor

    This is pretty basic, just repeating along the y axis. Was it worth a full blog post? I guess it could be helpful to some. I really enjoy the other posts on this site, but this one.. there’s not much to it.

    ·

  13. graphicbeacon Author Editor

    What if you want the height to auto-expand? browsers do not render fixed heights equally. In some browsers that will happen but extra/overflowing content will be hidden in others. has strict limitations and its not really effective in the long run.

    Wouldn’t hurt to fake a column with 1px height images going along the y-axis if you want the coloured sidebar bg to be there and not worry about height.

    Faking columns would have worked if using tables for layout, but has already been considered semantically incorrect for layout.

    ·

  14. Paweł P. Author Editor

    Hmmm… Bardzo ciekawe rozwiązanie.
    Pozdrawiam serdecznie

    ·

  15. Pk Author Editor

    Nice trick. I’ll make use of it in my website.

    ·

  16. Derek Author Editor

    Very nice and simple. I was just looking for something like this

    Thank you for sharing

    ·

  17. rohnn Author Editor

    @xomero
    “text-align:center;” is need for IE5 and below. (Someone still uses that ??? ) as it does not understand margin:0 auto.

    More seriously, in this very example (live demo) we have a doctype, so it’ll work, but IE7 and before, in quirk mode (e.g. no doctype) will behave in the same way and not understand the margin centering)

    It is a safeguard not necessary code line here, but surely not irrelevant. :)

    ·

  18. dede Author Editor

    very nice and simple..

    ·

  19. Nube Author Editor

    I am a beginner but isn’t it possible without a pic in background just with div and coulours ?

    ·

  20. volkan Author Editor

    thanks nice tut

    ·

  21. oto Author Editor

    really nice :D i likey!

    ·

  22. Brett Widmann Author Editor

    This is really helpful! Thanks for sharing.

    ·

  23. omar Author Editor

    thank you its very useful

    ·

  24. 5Elements Author Editor

    pixels..thanks for the info !!!

    ·

  25. roger Author Editor

    no found!… if 1 column have 500px; or more .. you css no found!…. sorry i no speak english XD.

    ·

  26. طراحی سایت Author Editor

    thank you its very useful

    ·

  27. طراحی سایت Author Editor

    Good Job, You just made my day.

    ·

  28. طراحی سایت Author Editor

    thanks

    ·

 

Build Internet by One Mighty Roar. Since 2008.