One thing that puzzles CSS newbies and even intermediates (as it did and still does with me) is how to get the visual layout with CSS that can easily be achieved with tables. A two-column layout where the columns are equal lengths is one such layout. (This assumes columns that are different colors.) As part of this week’s CSS tips, I’ll share how I got mine on this very site.

The basic visual layout of this site consists of the following divs in the indicated order:

<div id="page">
<div id="header"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>

The “page” div contains everything else and limits the width of the header and footer.

Now let me burst your bubble: The columns (the “content” and “sidebar” divs) aren’t truly equal height. I use a bit of smoke and mirrors to make the columns appear as if they are equal height. Setting div height with percentages or pixels is buggy right now in browsers, so they’re not like table cells, where the height of one column will automatically match the height of the next.

The trick is to use a background image with two colors.

The basics are to do the following with the div structure above:

1. Give the header and footer a relative position. This keeps them in the right place in the flow of the document.
2. Create an image that is the width of the page div and only 1 pixel high. This will keep the file small for faster loading. The image should have two colors, one for each column.
3. Specify the image as the background of the page div. Set it to repeat-y (vertical repeat).
4. The content div has a float: left attribute, and the sidebar div a float: right attribute. (You would reverse these if you put your nav column on the left.)
5. Each of your column divs should be narrower than the color stripe you created in your background image so that you have a built-in margin, and you’ll have to less messing with margins on the text styles.

Here are the basic styles for the five divs listed above (things like font styles are left out):

#page {
width:840px;
position: relative;
margin: 0 auto 0 auto;
border-left: 3px solid #496442;
border-right: 3px solid #496442;
background: #EAEAD5 url(../mypath/images/background.gif) repeat;
}
#header {
width:840px;
position: relative;
background-image:url(../mypath/images/header.jpg) no-repeat;
}
#content {
float:left;
clear:left;
display:inline;
width:596px;
background-color: #EAEAD5;
}
#sidebar {
float:right;
width:200px;
background: #5D7E53;
}
#footer {
clear:both;
position: relative;
background-color:#5D7E53;
border-top: 3px solid #496442;
border-bottom: 3px solid #496442;
}

You may notice the content div has an odd pixel width. That happened because I created the graphics as close as I could to what I wanted and then tweaked the styles, since tweaking the stylesheet in WordPress is easier than changing a graphic and uploading it multiple times.

The way this is styled, the longer of the two columns pushes the footer down, and the background graphic continues repeating and compensates. Smoke and mirrors. But something like this is transparent to the user and looks nice. So there’s Gryphon Mountain demystified.