How to Create a More Flexible Layout with Absolute Positioning - dummies

How to Create a More Flexible Layout with Absolute Positioning

By Nikhil Abraham

Generally, you use absolute positioning only on named elements, rather than classes or general element types. For example, you will not want all the paragraphs on a page to have the same size and position, or you couldn’t see them all. Absolute positioning works on only one element at a time.

However, you can build a layout with absolute positioning and some flexibility. This image illustrates such a design.

absolute layout, no fixed size
This page uses absolute layout, but it doesn’t have a fixed size.

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 here.

absolute layout resizes to fit browser window
The layout resizes in proportion to the browser window.

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 here.

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. You can fix this with the overflow attribute, but then you will have scrollbars in your smaller elements.

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, you 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%;

overflow: auto;

}

#content {

border: 1px black solid;

position: absolute;

left: 20%;

top: 10%;

width: 78%;

height: 90%;

padding-left: 1%;

padding-right: 1%;

overflow: auto;

}

The key to any absolute positioning (even this flexible kind) is math. When you just look at the code, it isn’t clear where all those numbers come from. Look at the diagram for the page to see how all the values are derived.

absolute layout diagram
The diagram is the key to a successful layout.

Building the flexible layout

Here’s how the layout works:

  1. Create an all container by building a div with the all ID.

    The all container will hold all the contents of the page. It isn’t absolutely necessary in this type of layout, but it does allow for a centering effect.

  2. Specify the size and position of all.
    Imagine you want the content of the page to be centered in the browser window, so you set its height and width to 90 percent, and its margin-left and margin-top to 5 percent. This sets the margin-right and margin-bottom to 5 percent also. These percentages refer to the all div’s container element, which is the body, with the same size as the browser window.
  3. Other percentages are in relationship to the all container.
    Because all the other elements are placed inside all, the percentage values are no longer referring to the entire browser window. The widths and heights for the menu and content areas are calculated as percentages of their container, which is all.
  4. Determine the heights.
    Height is usually pretty straightforward because you don’t usually have to change the margins. Remember, though, that the head accounts for 10 percent of the page space, so the height of both the menu and content needs to be 90 percent.
  5. Figure the general widths.
    In principle, the width of the menu column is 20 percent, and the content column is 80 percent. This isn’t perfectly accurate, though.
  6. Compensate for margins.
    You probably want some margins, or the text looks cramped. If you want 1 percent margin-left and 1 percent margin-right on the menu column, you have to set the menu’s width to 18 percent to compensate for the margins. Likewise, set the content width to 78 percent to compensate for margins.

As if this weren’t complex enough, remember that Internet Explorer 6 (IE6) and earlier browsers calculate margins differently! In these browsers, the margin happens inside the content, so you don’t have to compensate for them (but you have to remember that they make the useable content area smaller). You’ll probably have to make a conditional comment style sheet to handle IE6 if you use absolute positioning.