(^228) Chapter 6 Page Layout with CSS
(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 heightor widthfor the selector. We’ll use the autovalue 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
which contains the floated
image and first paragraph on the page. Notice that although the
image and first paragraph on the page. Notice that although the
contains both an
image and the first paragraph, the light background color of the
image and the first paragraph, the light background color of the
does not extend as
far as expected; it is only visible in the area occupied by the first paragraph. You can use
the overflowproperty assigned to the container element to resolve this display issue and
clear the float. In this case we’ll apply the overflowand widthproperties to the div
selector. The CSS to configure the divin 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 divselector
Note that Figure 6.12 and Figure 6.14 are very similar. Keep in mind that you could
configure additional CSS properties (such as marginor padding) to further modify the
browser display.
You may be wondering about which CSS property (clearor overflow) is the best to
use when you need to clear a float. The clearproperty 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
far as expected; it is only visible in the area occupied by the first paragraph. You can use
the overflowproperty assigned to the container element to resolve this display issue and
clear the float. In this case we’ll apply the overflowand widthproperties to the div
selector. The CSS to configure the divin 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 divselector
Note that Figure 6.12 and Figure 6.14 are very similar. Keep in mind that you could
configure additional CSS properties (such as marginor padding) to further modify the
browser display.
You may be wondering about which CSS property (clearor overflow) is the best to
use when you need to clear a float. The clearproperty 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
). 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 overflowproperties as you continue working through the book. Floating elements
is a key technique in designing multicolumn page layouts with CSS.
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 overflowproperties as you continue working through the book. Floating elements
is a key technique in designing multicolumn page layouts with CSS.