.rightcolumn {
position: absolute;
top: 135px;
left:260px;
width:200px;
text-align: justify;}.thirdcolumn {
position: absolute;
top: 135px;
left:495px;
width:200px;
text-align: justify;}When using absolute positions, you’re responsible for ensuring that the left
properties of your columns work as they should. The width of the leftmost
column, for example, helps you determine what the leftproperty of the
next column should be. In this code, the leftmost column is 200 pixels wide
(with 25 pixels added to that for its leftposition). You position the right-
columnclass further over by giving it a value of 260 pixels for itsleftposition.
The third column starts at 495 pixels.
Because these are absolute positions, any padding built into the body
is ignored.
If you want to add additional columns belowthese blocks of text (see the four
blocks of text in Figure 12-13), you have to create additional classes for them.
The three existing column classes in this code — leftcolumn, rightcolumn,
and thirdcolumn— have a fixed, specific topproperty (130 pixels for all
three of the columns). Obviously, columns lower on the page require a greater
topproperty value.
When you create fixed columns like these, no matter how the user resizes the
browser window, the text columns remain in the same position (relative to
the top left of the window) and also do not change their size or shape.
Figures 12-14 and 12-15 show how these fixed columns do not yield their
positions, or change their shapes, when the browser is resized.
The body of your page includes the various divisions (the columns in this
case); their positions are governed by the classes you created in the style
section:
<body><div class=”topheadline”>
WHEN SHIPS HEAD TO SEA
</div><div class=”leftcolumn”>