Page Layout with CSS - Web Development and Design Foundations with XHTML - page 257

Figure 6.25
The new JavaJam
two-column
index.html

Go to the end of the
book for a full color
version of this figure

Configure the navigation hyperlinks. Use a descendant selector to add a new
style rule for the anchor tags div within the nav id. Configure this selector to
have no underlines on hyperlinks, a 15 pixel margin, have centered text, and be
displayed as a block element (with line breaks above and below) by the browser.

●

#nav a { text-decoration: none;
margin: 15px;
text-align: center;
display: block;

}

Configure the right column content area with style rules for the content id to
configure an area with a 150 pixel left margin, background ( #f1e8b0 ) and text
( #000000 ) color, 10 pixels of top and bottom padding, 20 pixels of left and
right padding, and overflow set to auto to clear floating elements within the
content area.

●

#content { margin-left: 150px;
background-color: #f1e8b0;
color: #000000;
padding: 10px 20px;
overflow: auto;

}

Configure an area that floats to the right. Notice how the winding road
graphic shown in Figure 6.25 floats on the right side—this is configured with
the floatright class. Images are more compelling when separated from other
elements (such as text) by empty space. Add 20 pixels of padding to the left
side of this area.

●

. floatright { padding-left: 20px;
float: right;

}