• Choose a category
• All
• Classic-Fiction

By Root 1366 0

with one color spanning 200 pixels and the other 440 pixels. When you know the exact width you’re aiming for, you can position the columns to exactly that size. Here’s the CSS code:

body { background-image: url(“fixedBG.gif”);

background-repeat: repeat-y;

}

#header {

background-color: #e2e393;

border-bottom: 3px double black;

text-align: center;

float: left;

width: 640px;

clear: both;

margin-left: -8px;

margin-top: -10px;

}

#left {

float: left;

width: 200px;

clear: left;

}

#right {

float: left;

width: 440px;

}

#footer {

float: left;

width: 640px;

clear: both;

text-align: center;

background-color: #e2e393;

margin-left:-8px;

border-top: 3px double black;

}

This code works a lot like the other floating layouts, except for the following changes:

♦ The body has a background image attached. I attached the two-color background image to the entire body. This makes the page look like it has two columns. Remember to set the background-repeat attribute to repeat-y so the background repeats indefinitely in the vertical y-axis.

♦ The header and footer areas need background colors or images defined so the fake columns don’t appear to stretch underneath these segments.

♦ Header and footer will need some margin adjustments. The browsers tend to put a little bit of margin on the header and footer divs, so compensate by setting negative values for margin-left on these elements.

♦ All measurements are now in pixels. This will ensure that the layout corresponds to the image, also measured in pixels.

If you use a fixed-width layout and the user changes the font size, the results will be unpredictable. A fluid layout will change with the font size, but a fixed layout may have problems rendering a larger font in the indicated space.

Building a Centered Fixed-Width Layout

Fixed-width layouts are common, but they look a little strange if the browser isn’t the width specified in the CSS. If the browser is too narrow, the layout won’t work, and the second column will (usually) drop down to the next line.

If the browser is too wide, the page will appear to be scrunched onto the left margin with a great deal of white space on the right.

The natural solution would be to make a relatively narrow fixed-width design that’s centered inside the entire page. Figure 2-11 illustrates a page with this technique.

Some have called this type of design (fixed-width floating centered in the browser) a jello layout because it’s not quite fluid and not quite fixed.

Figure 2-11: Now the fixed-width layout is centered in the browser.

Making a surrogate body with an all div

In any case, the HTML requires only one new element, an all div that encases everything else inside the body (as usual, I removed the placeholder text):

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

type = ”text/css”

href = ”fixedWidthCentered.css” />

The entire page contents are now encapsulated in a special all div. This div will be resized to a standard width (typically 640 or 800 pixels). The all element will be centered in the body, and the other elements will be placed inside all as if it were the body:

#all {

background-image: url(“fixedBG.gif”);

background-repeat: repeat-y;

width: 640px;

height: 600px;

margin-left: auto;

margin-right: auto;

}

#header {

background-color: #e2e393;

border-bottom: 3px double black;

text-align: center;