• Choose a category
• All
• Classic-Fiction

By Root 1420 0

off with IE, this may be the problem. Use the conditional comment technique described in Chapter 5 of Book II to make a variant style for IE if this bothers you.

Problems with the floating layout

The floating layout solution is very elegant, but it does have one drawback. Figure 2-7 shows the three-column page with the borders drawn around each element.

Figure 2-7 shows an important aspect of this type of layout. The columns are actually blocks, and each is a different height. Typically, I think of a column as stretching the entire height of a page, but this isn’t how CSS does it. If you want to give each column a different background color, for example, you’ll want each column to be the same height. This can be done with a CSS trick (at least, for the compliant browsers).

Figure 2-7: The columns aren’t really columns; each is a different height.

Specifying a min-height

The standards-compliant browsers (all versions of Firefox and Opera, and IE 7) support a min-height property. This specifies a minimum height for an element. You can use this property to force all columns to the same height. Figure 2-8 illustrates this effect.

The CSS code simply adds the min-height attribute to all the column elements:

#head {

text-align: center;

border-bottom: 3px double gray;

}

#left {

float: left;

width: 20%;

min-height: 30em;

background-color: #EEEEEE;

}

#center {

float: left;

width: 60%;

padding-left: 1%;

padding-right: 1%;

min-height: 30em;

}

#right {

float: left;

width: 17%;

padding-left: 1%;

min-height: 30em;

background-color: #EEEEEE;

}

#footer {

border: 1px black solid;

float: left;

width: 100%;

clear: both;

text-align: center;

}

Some guesswork is involved still. You have to experiment a bit to determine what the min-height should be. If you guess too short, one column will be longer than the min-height, and the columns won’t appear correctly. If you guess too tall, you’ll have a lot of empty space at the bottom of the screen.

Unfortunately, the min-height trick works only with the latest browsers. IE versions 6 and earlier don’t support this attribute. For these browsers, you may need a fixed-width layout.

Figure 2-8: The min-height attribute forces all columns to be the same height.

Building a Fixed-Width Layout

Fluid layouts are terrific. They’re very flexible, and they’re not hard to build. Sometimes, though, it’s nice to use a fixed-width layout, particularly if you want your layout to conform to a particular background image.

The primary attribute of a fixed-width layout is the use of a fixed measurement (almost always pixels), rather than the percentage measurements used in a fluid layout.

Figure 2-9 shows a two-column page with a nicely colored background.

Figure 2-9:

A fixed-width layout can work well with a background image.

Setting up the XHTML

As usual, the XHTML code is minimal. It contains a few named divs. (Like usual, I’ve removed filler text for space reasons.)

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

type = ”text/css”

href = ”fixedWidth.css” />

Using an image to simulate true columns

If you need to overcome the limitations of older browsers, you can use a background image to simulate colored columns. Figure 2-10 shows the basic background image I’m using for this page.

Figure 2-10: This image is repeated vertically to simulate two columns.

The image has been designed with two segments. The image is exactly 640 pixels wide,