Use CSS floats to create a three-column (3 column) page layout


One of the most common page layouts on the Web today is a three-column arrangement. The main page content usually appears in the middle column, flanked by side columns containing navigational links and such. The three columns often sit beneath a horizontal header that spans the full width of the page, and a full-width footer at the bottom of the page finishes the basic layout.

Most Web builders are familiar with the techniques for producing such a layout with tables, and can create either a fixed-width layout or a “liquid layout” that expands and contracts automatically to fit the varying widths of visitors’ browser windows.

Now that we’re all trying to move away from table-based layouts, many Web builders are looking for ways to create the three-column layout in the new paradigm of XHTML markup and CSS formatting. It’s not too hard to execute a fixed-width version of the layout in CSS by using absolute positioning; but the liquid layout version is a bit more elusive. So here’s a recipe for a three-column configuration that uses the CSS float and clear attributes to achieve a liquid layout.

The general approach
The basic layout consists of five divs, one each for the header, footer, and the three columns. The header and footer divs span the full width of the page. The divs for the left and right columns are each fixed-width and use the float attribute to push them over to the left and right sides of the browser window. The div for the middle column actually spans the full width of the page, and the contents of that column flows between the left and right column divs. Since the middle-column div doesn’t have a fixed width, it’s free to expand and contract as needed with changes in the browser window. Padding attributes for the left and right side of the middle div keep the contents arranged in a neat column, even if it extends below the bottom of one of the side divs.

<body>
<div id=”header”>
<h1>Header</h1>
</div>
<div id=”left”>
Port side text…
</div>
<div id=”right”>
Starboard side text…
</div>
<div id=”middle”>
Middle column text…
</div>
<div id=”footer”>
Footer text…
</div>
</body>
And here’s the CSS code:
body {
margin: 0px;
padding: 0px;
}
div#header {
clear: both;
height: 50px;
background-color: aqua;
padding: 1px;
}
div#left {
float: left;
width: 150px;
background-color: red;
}
div#right {
float: right;
width: 150px;
background-color: green;
}
div#middle {
padding: 0px 160px 5px 160px;
margin: 0px;
background-color: silver;
}
div#footer {
clear: both;
background-color: yellow;
}

Some notes about the code
The sequence of divs in the HTML code is important. The left and right divs must come before the middle div. This allows the two side columns to float into their positions at the sides of the screen. The content in the middle div will then flow up into the space between them. If the browser encounters the middle div before one or both of the side column divs, the middle div will be allowed to fill the page out to the side, and the floated div that follows will be positioned below the middle div instead of beside it.

The clear: both declarations in the div#header and div#footer styles ensure that floated divs don’t encroach on the header and footer. The padding: 1px declaration in the div#header style is there to eliminate an anomalous band of background color that appears at the top of the page in Netscape if the padding is set to zero.

The float: left declaration in the div#left style pushes the div over to the left. The width: 150px declaration sets the column to a fixed width, but you can easily substitute a percent value instead. In the div#right style, the float: right declaration pushes the div to the right. In this case, the floats push the divs all the way out to the left and right edges of the browser window. However, if these divs were enclosed within another div, the floats would push them to the edges of the containing div instead.

In the div#middle style, the absence of a clear declaration allows the contents of the middle div to flow up between the side columns. The padding: 0px 160px 5px 160px declaration sets padding on the left and right sides to allow room for the 150px-wide side column divs, plus an extra 10px of breathing room.

This is a very crude and simplistic example, but it serves to illustrate the basic technique of using floated divs to create the side columns of a three-column liquid layout.

One thought on “Use CSS floats to create a three-column (3 column) page layout

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s