Use CSS floats to create a three-column web ayou

Message Topic Search Topic Options Post Reply Create New Topic Printable Version

   Use CSS floats to create a three-column page layout
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 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.
HTML Code

<body>
<div id="header">
    <h1>Top Horizontal Row</h1>
</div>
<div id="left">
    Left Column
</div>
<div id="right">
    Right Column
</div>
<div id="middle">
    Middle column
</div>
<div id="footer">
    Footer
</div>
</body>

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;
}

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