O'Reilly logo

CSS Cookbook, 3rd Edition by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating a Flexible Multicolumn Layout with Positioning

Problem

You want to create a four-column layout with columns that resize to the width of the browser, as shown in Figure 11-8.

Four-column layout with percentage-based widths

Figure 11-8. Four-column layout with percentage-based widths

Solution

First, mark up the content with div elements using the id attributes that contain appropriate values representing their placement on the page:

<div id="header">
 [...]
</div>
<div id="columnLeft">
 [...]
</div>
<div id="columnInnerLeft">
 [...]
</div>
 [...]
<div id="columnInnerRight">
  [...]
</div>
 [...]
<div id="columnRight">
 [...]
</div>

Next, use the position property in each column, setting the value to absolute while setting the placement of the columns with the left and top properties:

#columnLeft {
 position: absolute;
 left:1%;
 width:20%;
 top: 4em;
 background:#fff;
}
#columnInnerLeft {
 position: absolute;
 left: 22%;
 width: 28%;
 top: 4em;
 background: #fff;
 text-align: justify;
 border-width: 0;
}
#columnInnerRight {
 position: absolute;
 left: 51%;
 width: 28%;
 top: 4em;
 background: #fff;
}
#columnRight {
 position: absolute;
 left: 80%;
 width: 19%;
 top: 4em;
 background: #fff;
}

Discussion

By setting the position property to absolute, you take the element completely out of the flow of the document. When an element is set to float, other elements in a page can flow around the “floated” element. When an element is set to absolute, that element is ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required