Layout - Refactoring HTML: Improving the Design of Existing Web Applications - page 169

...
<li><a href="/book12163/">The Sleeper Awakes<br /></li>
<li><a href="/book8968/">The World Set Free</a></li>
<li><a href="/book20553/">Out Around Rigel</a></li>
</ul>
</div>
</body>
</html>
Let's suppose we want the left column to be 10 ems wide and the right column to be 20 ems wide. We set up
three columns, one for each div . Each div is positioned relative and floated to the left. The left and right
columns have fixed widths and the center column is set to 100% width. Then margins are used to keep the
columns from laying on top of each other. To be specific:
Left column:
Position is relative.
Float is left.
Width is a fixed value you choose.
The right position is equal to the width of the column plus the left padding plus the right padding plus the
left padding of the center column plus the right padding of the center column.
The left margin is -100%.
Right column:
Position is relative.
Float is left.
Width is a fixed value you choose.
The right position is equal to the width of the column plus the left padding plus the right padding.
The right margin is -100%.
Center column:
Position is relative.
Float is left.
Width is 100%.
Body: