HTML and CSS Reference
In-Depth Information
browser. The browser renders the page using normal flow and displays the XHTML
elements in the order they are coded.
Let's add CSS to float the image and look more similar to Figure 6.11. Save the file with
the name floatyls.html. With floatyls.html open in a text editor, modify the code as follows:
1. Add a style rule for a class name float that configures float , margin , and
border properties.
.float { float:left;
2. Assign the image element to the class named float (use class="float" ).
Save the file. Launch a browser and test your page. It should look similar to the Web page
shown in Figure 6.11. The student files contain a sample solution at Chapter6/floatyls.html.
Take a moment to examine your file in a browser (see Figure 6.11) and consider how the
browser rendered the page. The <div> is configured with a light background color to
demonstrate how floated elements are rendered outside of normal flow. Observe that the
image and the first paragraph are contained within the <div> . The <h2> follows the div . If
all the elements were rendered using normal flow, the area with the light background color
would contain both the child elements of the <div> : the image and the first paragraph.
Additionally, the <h2> would be placed on its own line under the <div> . However, because
the image is floated it is outside of normal flow—that's why the light background color
only appears behind the first paragraph and why the <h2> text begins immediately after
the first paragraph and appears next to the floated image. In the following sections you'll
explore properties that can “clear” this float and improve the display.
The clear Property
The clear property is often used to terminate, or “clear”, a float. You can set the value of
the clear property to left , right , or both —depending on the type of float you need to
clear. In our example, we need to clear the left float. Review Figure 6.11 and the code sam-
ple in the student files at Chapter6/floatyls.html. Notice that although the <div> contains
both an image and the first paragraph, the light background color of the <div> only dis-
plays behind the screen area occupied by the first paragraph—it stops a bit earlier than
expected. Clearing the float will help take care of this display issue. A common technique
to clear a float within a container element is to add a line break element configured with
the clear property. See the example in the student files at Chapter6/floatylsclear1.html.
Observe that a CSS class is configured to clear the left float:
.clearleft { clear: left; }
Also, a line break tag assigned to the clearleft class is coded before the closing </div>
tag. The code for the <div> is shown below:
<img class="float" src="yls.jpg" alt="Yellow Lady Slipper"
height="100" width="100" />
<p>The Yellow Lady Slipper grows in wooded areas and blooms in June
each year. The flower is a member of the orchid family.</p>
<br class="clearleft" />
Search WWH ::

Custom Search