One of the questions I get asked the most often regarding my personal site’s design is the following:
It’s a simple concept, really — one that many of you may already be familiar with. But for those who aren’t, the following technique can be a handy little trick.
One of the somewhat frustrating properties of CSS is the fact that elements only stretch vertically as far as they need to. Meaning, if a 200-pixel tall image is contained within a
<div> will only expand down the page 200 pixels.
This becomes an interesting dilemma when you use
<div>s to section your markup, then apply CSS to create a columnar layout. One column may be longer than the other (see Figure 1). Depending on the amount of content contained, it becomes difficult to create a layout with two equally tall columns when a unique background color is desired for each column.
There are a few ways to make the columns appear equal in length, regardless of the content that they contain. I’m sharing my particular solution (for use with an absolutely positioned layout), which happens to be pretty darned ... simple. This same little trick is also used elsewhere, including this very site.
The embarrassingly simple secret is to use a vertically tiled background image to create the illusion of colored columns. For SimpleBits, my background image looks something like Figure 2 (proportions changed for demonstration), with a decorative stripy thing on the left, a wide white section for the content column, a 1 pixel border, and a light brown section for the right column’s background followed by the reverse of the left side’s decorative border.
The whole image is no more than a few pixels tall, but when vertically tiled, it creates the colored columns that will flow all the way down to the bottom of the page — regardless of the length of content in the columns.
This elementary CSS rule is added to the
background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;
Essentially, we’re making the entire page’s background color grey and tiling it vertically only (
50% 0 bit refers to the positioning of the background image — in this case, 50% from the left side of the browser window (resulting in a centered image) and 0 pixels from the top.
With the background image in place, my positioned layout sits on top, with padding and margins set for the left and right columns, ensuring that they will line up in the right place — within the faux columns created by the background image (see Figure 3).
It’s important to note that if borders, padding and margins are desired on either column, then we must still make up for IE/Win’s botching of the box model with Tantek Çelik’s Box Model Hack or Mid Pass Filter.
Alternatively, if borders or padding can be avoided altogether by just using margins instead, then the the Box Model Hack will not be necessary. And if the column’s content is simply sitting (transparently) on top of the tiled background, then it should be easy to avoid the hack.
Whatever floats your boat
While I use absolute positioning to create a two-column layout on my own site, equally fine results can be achieved via the
float property (as seen here at ALA).
The same idea applies: tile the background image, then float a column in position to overlay the faux-column backdrop behind.
It’s a simple concept, but one that may alleviate one of the frustrations that designers frequently encounter when building CSS-based layouts.
(Thanks to Jeffrey Zeldman for help in refining this article.)