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

(the content fills the area and, if needed, scroll bars are displayed to allow access to the
remaining content), and scroll (the content is rendered in the area allocated to it and
scroll bars are displayed). When using overflow , to ensure cross-browser compatibility
you also must configure a height or width for the selector. We'll use the auto value for
our purpose of clearing the left-floated image. Review Figure 6.11 and the code sample in
the student files at Chapter6/floatyls.html. Observe the <div> which contains the floated
image and first paragraph on the page. Notice that although the <div> contains both an
image and the first paragraph, the light background color of the <div> does not extend as
far as expected; it is only visible in the area occupied by the first paragraph. You can use
the overflow property assigned to the container element to resolve this display issue and
clear the float. In this case we'll apply the overflow and width properties to the div
selector. The CSS to configure the div in this manner is shown below:
div { background-color:#F3F1BF;
overflow:auto;
width:100%;
}
This CSS is all that is needed to be added to the code to clear the float and cause the Web
page to display similar to Figure 6.14 (found in student files hapter6/floatylsoverflow.html).
Figure 6.14
The overflow
property is applied
to the div selector
Note that Figure 6.12 and Figure 6.14 are very similar. Keep in mind that you could
configure additional CSS properties (such as margin or padding ) to further modify the
browser display.
You may be wondering about which CSS property ( clear or overflow ) is the best to
use when you need to clear a float. The clear property is widely used and you should
become familiar with its use. However, when it is likely that the floated content will
take up more vertical space on the Web page than its companion content and the con-
tainer element is configured with a background color and/or border, apply the overflow
property to the container element (for example, a <div> ). This will clear the float,
avoid adding an extra line break tag, and ensure that the container element expands
to enclose the entire floated element. You'll get more practice with the float , clear ,
and overflow properties as you continue working through the topic. Floating elements
is a key technique in designing multicolumn page layouts with CSS.