This layout is similar to the previous examples but uses float instead of positioning. This three-column fixed-width layout with a header and a footer uses five elements. Once the structure is understood, it can be translated into many different designs.
- header
- three columns
- footer
This example page will be a fixed-width of 450 pixels and contain three columns, each 150 pixels wide. As with many pages you see, the header will float above the columns and the footer will float below. Each element is contained within a DIV and the entire content group (the three columns) is also contained in a container DIV that wraps around the three columns. This container DIV ensures that, no matter how long any column is, the bottom of the container will get pushed down the page. This also causes the footer to get pushed down too—otherwise, the footer would not be positioned correctly.
This is the
basic HTML markup
without any styling applied to it.
<div id="header">
This is the header
</div>
<!-- beginning contentAarea -->
<div id="contentArea">
<div id="column1">
These divs will float side by side to create columns.
This is div 1 with a little
text to give it some height...
</div>
<div id="column2">
This is div 2 with a little less text so it's a
different height than the other two...
</div>
<div id="column3">
The objective is that no matter which of
the three divs is longest, the footer sits below it...
</div>
</div>
<!-- end contentArea -->
<div id="footer">
This is the footer
</div>Note how the "column1", "column2" and "column3" DIVs are nested within the "contentArea" DIV.
When beginning a design, using background colors and/or borders
helps with the positioning of the elements and allows the developer to see the various
content areas easily. Use this method to set up your design with dummy data. Later,
when the design is set and tested, begin adding the "real" data.
EXAMPLE
/* reset margins. set font and size */
body {
margin:0px; padding:0px;
font: 1.0em verdana, arial, sans-serif;
}
/* set header width and bg color */
div#header {
width:450px;
background-color:#6A2A00;
}
/* set content container width and bgcolor */
div#contentArea {
width:450px;
background-color:#EF8A46;
}
/* set content width and bg color */
div#column1 {width:150px; background-color:#624208;}
div#column2 {width:150px; background-color:#625908;}
div#column3 {width:150px; background-color:#C0560F;}
/* set footer width and bg color */
div#footer {
width:450px;
background-color:#423227;
}
Next, float the three columns to the left and add a border to the DIV named contentArea so that it is easy to see.
EXAMPLE
div#header {
width:450px;
background-color:#6A2A00;
}
div#contentArea {
width:450px; background-color:#EF8A46;
border: white solid;
}
div#column1 {
width:150px;
background-color:#624208;
float: left;
}
div#column2 {
width:150px;
background-color:#625908;
float: left;
}
div#column3 {
width:150px;
background-color:#C0560F;
float: left;
}
div#footer {
width:450px;
background-color:#423227;
}
Hmmmmm....
- One problem is that if one column is shorter, the footer will try to move up to it instead of sitting underneath the three columns like it's supposed to.
- Another problem is the contentArea DIV. Look at the white line that is supposed to surround it—the top and bottom edges are touching! The container contains only floated elements; it contains no vertical height! Therefore it thinks it is empty. ARRGHHH!!
To make the DIV open up and surround the columns, we can trick it by adding a non-floated
element after the column DIVs. This will force the containing element to enclose the
rest of the non-floating DIV's. We can then force the contentArea DIV to clear it. Make
sure to put something inside the
"clearfloats" DIV to avoid
problems (comments or work fine).
EXAMPLE
Style Sheet
/* clears the floats so the footer will place correctly */
div.clearfloats { clear: both; }1
HTML Markup
<div id="column3">
The objective is that no matter which of the
three divs is longest, the footer sits below it...
</div>
<div class="clearfloats">
<!-- this comment is the non-floated element -->
</div>
1use a class because you might want to use this on the page again
This
EXAMPLE
tests the fixed-width design by adding more content to one of the columns to make sure
the footer stays where it is supposed to be.
What are the problems with this method? What can you do to overcome them?
This is
EXAMPLE
implements the three-floating-column layout with liquid (fluid) columns.
Alternatives
The Stylin' book cites several issues that IE/Win exhibits with floats and positioning. Testing your layouts in multiple browsers is crucial.
The above method is a rather inelegent solution because it requires additional markup. A better method, called the Aslett Clearing Method is described in your Stylin' book. This method is quite clever and I encourage you to study it.
Several versions of the book contain mis-prints and typos which make the Aslett Clearing Method difficult to get working! If you wish to try it, ensure that the text in your printing of the book is current by visiting the
Stylin' Errata page
.
Resources
-
Contained Floats
.
Tony Aslett Explains the Aslett Clearing Method.
-
EasyClearing, the Aslett/PIE Way is NOT Broken in IE7!