Creating Page Layouts with CSS - HTML, CSS, and Dynamic HTML - page 247

Floating an Element
• To float an element, use the style property

float: position ;
where position is none (the default), left , or right .
• To display an element clear of floating elements, use

clear: position ;
where position is none (the default), left , right , or both .

The next item you want to add to Dan's Web page is the president's message article.
Because that article appears below the horizontal navigation list, you'll use the clear
property to ensure that it's displayed only when the left margin is clear of fl oated objects.
Dan also wants to stack this item alongside the second navigation list, so you'll fl oat the
president's message article on the left margin even as you clear it from the fi rst navigation
list. You'll add the following rule to your style sheet:

#president {
background-color: rgb(105, 96, 87);
background-color: rgba(255, 255, 255, 0.3);
clear: left;
float: left;
width: 40%;
}
The style rule uses progressive enhancement to set the background color either to
medium gray or to white with 30% opacity. The rule also sets the width of the article to
40% of the width of the page body.

To format the navigation list:

◗

1. Return to the cp_styles.css style sheet in your text editor, and then at the bottom
of the style sheet, insert the following rule (see Figure 4-23):

/* President's message */

#president {
background-color: rgb(105, 96, 87);
background-color: rgba(255, 255, 255, 0.3);
clear: left;
float: left;
width: 40%;
}