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

padding-bottom , and padding-left properties. A short-hand version of this is to
set all four values in one padding property. The order of the numeric values deter-
mines which box side is configured (top, right, bottom, left). In this page layout the
padding at the top, right, and left sides of the content should be set to 20 pixels.
.content { padding: 20px 20px 0 20px;
}
● Image Floating at the Right. Configure the image with a 10 pixel margin and
float:right.
#floatright { margin: 10px;
float : right ;
}
● Footer. Configure the page footer with very small text that is centered. A
clear:right is needed to clear the float of the image. Configure 20 pixels of
padding on the bottom of the footer.
#footer { font-size: xx-small;
text-align: center;
clear: right;
padding-bottom: 20px;
}
● Navigation Area. You will use a descendent selector ( #leftcolumn a ) to indicate
the styles for anchor tags within the leftcolumn id. Configure these navigation
links with no underlines ( text-decoration:none ), a 15 pixel margin, and to use
display:block , which will allow each anchor tag to act as a block element and
be displayed on a separate line.
#leftcolumn a { text-decoration: none;
margin: 15px;
display: block;
}
Type the closing XHTML style tag as follows.
</style>
Save the twocolumn.html file in the wildflowers2 folder.
Part 3—Test the Page
Now that your styles are coded, test the twocolumn.html page again. Your page should
be similar to the screenshot shown in Figure 6.21. If there are differences, verify the id
and class values in your XHTML and check the syntax of your CSS. You may find the
W3C CSS validator at http://jigsaw.w3.org/css-validator helpful when verifying CSS syn-
tax. The student files contain a copy of twocolumn.html in the Chapter6/wildflowers2
folder.
This is just one of many ways that a two-column page layout can be coded. The best
way to learn is to experiment by changing some of the properties and noting the result.
It is a very good idea to test your pages in more than one browser. The pages in this
chapter were tested using Internet Explorer 8, Opera 9, Safari for Windows and Mac,
Google Chrome, and Firefox 3.