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.
<div id="content-wrapper"> <div id="content"> <div id="sidebar"></div> <div id="main-column"></div> </div> </div>
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.
#content-wrapper{ width:100%; background:#fff url('split-bg.png') repeat-y top center; text-align:center; }
#content{ width:960px; margin:0px auto; text-align:left; overflow:auto;}
#sidebar{ width:260px; height:400px; float:left; background:#f5f5f5; }
#main-column{ width:699px; height:400px; float:left; clear:right; background:#fff; border-left:1px solid #aaa; }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.
Discussion
March 24th, 2010 at 2:16 PM
TFS ;) .. Nice
March 24th, 2010 at 5:11 PM
You guys are awesome in providing examples of subtle ways to dramatically improve a design…and this is another one–very nice :)
March 24th, 2010 at 5:39 PM
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.
March 24th, 2010 at 5:45 PM
@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.
March 24th, 2010 at 11:05 PM
@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?
March 25th, 2010 at 4:40 AM
The “Purely CSS” threw me off, I thought you had discovered a way to fake a column without using images. Good writeup nevertheless. :P
March 25th, 2010 at 7:59 AM
Good tutorial. I was wondering when you two were going to throw up a new post.
March 25th, 2010 at 11:23 AM
well written tut. Thanks..
March 25th, 2010 at 12:25 PM
Hi sam !!
This tut seems to be simple , but its really amazing one !
Thanks for sharing !
keep it up :)
~Avinash
March 25th, 2010 at 5:05 PM
why “text-align:center;” in the “#content-wrapper” class. I think its irrelevant
March 25th, 2010 at 6:00 PM
Very cool~ I have a similar effect layering two divs: http://ow.ly/1qYZf
just another approach to this effective technique!
March 26th, 2010 at 12:21 AM
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.
March 26th, 2010 at 11:38 AM
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.
March 27th, 2010 at 5:01 AM
Hmmm… Bardzo ciekawe rozwiÄ…zanie.
Pozdrawiam serdecznie
March 30th, 2010 at 2:29 AM
Nice trick. I’ll make use of it in my website.
March 30th, 2010 at 8:55 AM
Very nice and simple. I was just looking for something like this
Thank you for sharing
April 1st, 2010 at 10:52 AM
@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. :)
April 29th, 2010 at 11:46 PM
very nice and simple..
May 3rd, 2010 at 11:02 AM
I am a beginner but isn’t it possible without a pic in background just with div and coulours ?
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.