• Choose a category
• All
• Classic-Fiction

The HTML file calls an external style sheet called absLayout.css.

Adding the CSS

The CSS code is a bit lengthy but not too difficult:

/* absLayout.css */

#all {

border: 1px solid black;

width: 800px;

height: 600px;

position: absolute;

left: 0px;

top: 0px;

}

#head {

border: 1px solid green;

position: absolute;

width: 800px;

height: 100px;

top: 0px;

left: 0px;

text-align: center;

}

#menu {

border: 1px solid red;

position: absolute;

width: 140px;

height: 500px;

top: 100px;

left: 0px;

padding-left: 5px;

padding-right: 5px;

}

#content{

border: 1px solid blue;

position: absolute;

width: 645px;

height: 500px;

top: 100px;

left: 150px;

padding-left: 5px;

}

A static layout created with absolute positioning has a few important features to keep in mind:

♦ You’re committed to position everything. After you start using absolute positioning, you need to use it throughout your site. All the main page elements require absolute positioning because the normal flow mechanism is no longer in place.

You can still use floating layout inside an element with absolute position, but all your main elements (heading, columns, and footing) need to have absolute position if one of them does.

♦ You should specify size and position. With a floating layout, you’re still encouraging a certain amount of fluidity. Absolute positioning means you’re taking the responsibility for both the shape and size of each element in the layout.

♦ Absolute positioning is less adaptable. With this technique, you’re pretty much bound to a specific screen width and height. You’ll have trouble adapting to PDAs and cellphones. (A more flexible alternative is shown in the next section.)

♦ All the widths and the heights have to add up. When you determine the size of your display, all the heights, widths, margins, padding, and borders have to add up, or you’ll get some strange results. When you use absolute positioning, you’re also likely to spend some quality time with your calculator, figuring out all the widths and the heights.

Creating a More Flexible Layout

You can build a layout with absolute positioning and some flexibility. Figure 4-5 illustrates such a design.

The size of this layout is attached to the size of the browser screen. It attempts to adjust to the browser while it’s resized. You can see this effect in Figure 4-6.

The page simply takes up a fixed percentage of the browser screen. The proportions are all maintained, no matter what the screen size is.

Having the page resize with the browser works, but it’s not a complete solution. When the browser window is small enough, the text will no longer fit without some ugly bleed-over effects.

Designing with percentages

This absolute but flexible trick is achieved by using percentage measurements. The position is still set to absolute, but rather than defining size and position with pixels, use percentages instead. Here’s the CSS:

/* absPercent.css */

#all {

border: 1px black solid;

position: absolute;

left: 5%;

top: 5%;

width: 90%;

height: 90%;

}

#head {

border: 1px black solid;

position: absolute;

left: 0%;

top: 0%;

width: 100%;

height: 10%;

text-align: center;

}

#head h1 {

margin-top: 1%;

}

#menu {

border: 1px green solid;

position: absolute;

left: 0%;

top: 10%;

width: 18%;

height: 90%;

padding-left: 1%;

padding-right: 1%;

}

#content {

border: 1px black solid;

position: absolute;

left: 20%;

top: 10%;

width: 78%;

height: 90%;

padding-left: 1%;

padding-right: 1%;

}

Figure 4-5: This page uses absolute layout, but it doesn’t have a fixed size.

Figure 4-6: The layout resizes in proportion to the browser window.

The key to any