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.
