7.8. Creating a Fixed-Width Multicolumn Layout with Positioning
Problem
You want to create a four-column layout with fixed-width columns.
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, making sure to use pixels for the
units:
#columnLeft { position: absolute; left:5px; width:190px; top: 44px; background:#fff; } #columnInnerLeft { position: absolute; left: 205px; width: 190px; top: 44px; background: #fff; text-align: justify; border-width: 0; } #columnInnerRight { position: absolute; left: 405px; width: 190px; top: 44px; background: #fff; } #columnRight { position: absolute; left: 605px; width: 190px; top: 44px; background: #fff; }
Discussion
Setting the width of the columns as well as the
left
and top
properties to
length units creates the fixed-width columns. This Solution is just
as easy with two to three or more columns. Remember that anything
more than four or five columns might be impractical.
See Also
Recipe 7.4 on creating a fixed-width two-column layout; Recipe 7.6 on creating a fixed-width multicolumn layout with floats.
Get CSS Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.