Page Layouts

1. The Layout For This Site.

There was an interesting discussion on a Web development forum regarding fixed and flexible page layouts. There are good arguments for both designs, but I generally use a flexible layout in order to maximize the area available for page content.

This site uses a flexible layout and was developed using CSS positioning. There are three static DIVs (no top, left, right, or bottom properties) and one absolute positioned DIV (a Layer in Dreamweaver terminology). Here are the style sheet rules for the three static DIVs:

#header {
height: 90px;
background-color: #B0B9C9;
border-bottom: 1px solid #999999;
text-align: left;
padding-left: 20px;
}

#content {
padding: 20px;
margin-left: 220px;
border-left: 1px solid #999999;
}

#footer {
clear: both;
padding: 6px 0 0 0;
border-top: 1px solid #999999;
text-align: center;font-size: 80%;
}

The menu on the left is contained in an absolutely positioned DIV (a Layer in Dreamweaver terminology). There are two reasons for using an absolutely positioned DIV for the menu:

1) The menu can be placed on the page with pixel-precision.

2) Should you want the menu to remain visible when the page is scrolled, you can make an absolutely positioned DIV/Layer persistent.

Here is the style sheet rule for the absolutely positioned DIV:

#navlist {
position: absolute;
left: 20px;
top: 110px;
width: 186px;
}

2. Using CSS To Simulate Frames.

Here is a demonstration of CSS used to simulate frames.

3. Equal Height Columns.

If you are interested in layouts with equal height columns, you may be interested in these layouts from Project VII which use JavaScript to create columns (DIVs) of equal height.

The JavaScipt is here.

And the layouts are here.