Page 2 of 3 What if you want to have three columns, all liquid, and all equal height? In this case, a single shifting background image will not work, because the center portion needs to grow and shrink in size. In this case, you need to create multiple background images that can overlay one another to create the effect. This means we can't place the background image on the body; instead, we need two container divs, each with a tiling background image – one with the image for the left column, and the other with the image for the right.
Let's say we're trying to build the following design of three equal length columns, a partial header, and a full footer, all liquid:
Image 3: The design we want to accomplish using CSS.
We'll start by creating our background images. First create a new document in Fireworks that is 2000 by 10 pixels. Fill the left 20 percent (400 pixels) with a rectangle in color #990000. With the rectangle still selected, go to Texture on the Properties panel and select Crosshatch 3 to fill the shape with this pattern. If you zoom in closely you will notice that the pattern is partially cut off on the bottom, which means it will not tile correctly. With the rectangle deselected, click the Canvas Size button on the Properties panel. Change the 10 to 8 and click the top center button next to Anchor. This will crop the image from the bottom to eight pixels high, which is the height of one complete row of the diamond pattern. Now the spot in the pattern where it ends at the bottom matches up with the spot where it begins at the top, so it will tile seamlessly.
Image 4: The pattern at ten pixels high (left) versus eight pixels
high (right). Cropped to eight pixels, it will tile seamlessly.
Open the Optimize panel and select GIF as your file format and Index Transparency. Use the eyedropper tool with the plus sign to select the white in the rest of the image as the transparent color. Export the image and save as left-bg.gif. (The source file for this image is provided in the downloads as left-bg.png.)
Our next step is to create the background image for the right column. Although it looks like a simple border, we need to use a background image to ensure that this "border" always extends to the bottom of the longest column. If we just set a border on the right or center columns, it would only extend as far as the content in that column. Using a background image to simulate a border enables us to create equal height columns.
Create a new document in Fireworks that is 2000 by 8 pixels (just to be consistent with our other image, but the height in this case is irrelevant). We want the right column to be 28 percent, which is 560 pixels, so drag a guide out to the 1440 pixel mark (560 pixels from the right). To create a guide, make sure your rulers are showing (if not, press CTRL/CMD+ALT+R), position your mouse over the vertical ruler, then click and drag out to the right. A green line should appear, which you can then drag to the 1440 pixel mark. You may want to zoom in to make sure you get right on the mark – these background images need to be precise!
Select the Line tool and set color #CCCCCC as the stroke color. Draw a vertical line up against the right side of the guide. Then, use the Optimize panel to set the file format and transparency options just like you did for the first image, and export as right-bg.gif. (See right-bg.png for the source file.)
Create a new (X)HTML document and style sheet. We need two wrappers to hold our two background images, so create those divs first.
<div id="wrapper1">
<div id="wrapper2">
</div>
</div>
In your style sheet, create the following selectors:
#wrapper1 {
background: url(left-bg.gif) 20% 0;
}
#wrapper2 {
background: url(right-bg.gif) 72% 0;
}
We've set the left background image to 20 percent because we want its 20 percent point to be placed 20 percent across the box. We've set the right background image to 72 percent because we want its 72 percent point to be placed 72 percent across, creating a 28 percent wide right column.
Because wrapper2 is nested in wrapper1, it covers it completely, but since we made most of wrapper2's background image transparent, we can still see wrapper1's background image through the transparent area. Because left-bg.gif, the background for wrapper1, is on the bottom in this case, we didn't need to make any of it transparent, but we did anyway so we could have the flexibility to lay either one over the other. If you prefer, you can assign right-bg.gif to wrapper1 and left-bg.gif to wrapper2 instead – the ordering here doesn't matter because they both will be the same width and height.
If you look at your page now, you won't see either of the background images, because so far the page has no content! Let's add that now. I'm going to use the float method outlined in John Gallant and Holly Bergevin's article The Theory of CSS Column Design: Source Order. If you aren't familiar with it, please look that article over first.
Add the following divs within wrapper2:
<div id="wrapright">
<div id="header">header</div>
<div id="center">center content</div>
<div id="right">right content</div>
</div>
<div id="left">left content</div>
Then add the following selectors to your style sheet:
#wrapright {
float: right;
width: 80%;
}
#header {
background: #fcc;
}
#center {
float: left;
width: 65%;
}
#right {
margin-left: 65%;
}
#left {
color: #fff;
margin-right: 80%;
}
What this does is effectively divide the page into two columns first – wrapright and left – then further divides wrapright into two columns – center and right – to create our three columns. The header, which sits in wrapright, has its own background color assigned that simply overlays the tiling backgrounds below.
The center div is floated to the left within wrapright and given a width of 65 percent. This value may be puzzling at first, because we want our center column to be 52 percent wide (the space left over after the 20 percent left column and 28 percent right column). However, remember that this is 52 percent in relation to the window, and the width here is in relation to center's parent, wrapright, which is only 80 percent of the window. So, 52 percent is actually some unknown percentage of the 80 percent. If we put this into algebra terms, we get the following formula:
.52 = .8x
or
.52/.8 = x
So, to solve for our mystery percentage x we divide .52 by .8 and get .65, or 65 percent!
You want to end up with a nice even number here. If you end up with a fraction, such as 62.5, adjust your column widths until you can come up with an even integer. This is because fractional numbers are handled differently by different browsers, potentially causing overlaps. Thus, you should do these column calculations before you even create your background images. That's why I choose 28 percent for the right column – doing so made the center column 52 percent, which divided evenly into 80.
Page 2 of 3 Previous
1
2
3
Next
Keywords
CSS, style sheet, liquid, fluid, fixed, equal-height, columns, background position, tile, resize, grid
