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

View Figure 6.10 and notice how the image stays on the right side of the browser view-
port. An id called yls was created that applies the float , margin , and border proper-
ties. The attribute id="yls" was placed on the image tag. The CSS follows:
h1 { background-color: #A8C682;
padding: 5px;
color: #000000;
}
p { font-family:Arial,sans-serif;
}
#yls { float: right;
margin: 0 0 5px 5px;
border: solid;
}
The XHTML source code follows:
<h1>Wildflowers</h1>
<img id="yls" src="yls.jpg" alt="Yellow Lady Slipper" height="100"
width="100" />
<p>The heading and paragraph follow normal flow. The Yellow Lady
Slipper pictured on the right is a wildflower. It grows in wooded
areas and blooms in June each year. The Yellow Lady Slipper is a
member of the orchid family.</p>
HANDS-ON PRACTICE 6.3
In this Hands-On Practice you'll practice using the CSS float property as you config-
ure the Web page shown in Figure 6.11.
Figure 6.11
The CSS float
property left-aligns
the image
Create a folder named ch6float. Copy the starter3.html and yls.jpg files from the
Chapter6 folder in the student files into your ch6float folder. Launch a text editor and
open the starter3.html file. Notice the order of the images and paragraphs. Notice that
there is no CSS configuration for floating the images. Display starter3.html in a