that you declare a width for your floated elements. Otherwise, youcould get something like Figure 7-66.

Figure 7-66

Figure 7-66. Floated text without an explicit width Backgrounds and floats

There are many other interesting effectsassociated with floating elements. Take the example of a shortdocument, composed of no more than a few paragraphs andH3 elements, where the first paragraph contains a Monday 19th of March 2018 10:50:55 PM

by Eric A. Meyer
ISBN 1-56592-622-6
First edition, published May 2000.
(See the
catalog page for this book.)

Search the text of Cascading Style Sheets: The Definitive Guide.

Table of Contents

Copyright Page
Chapter 1: HTML and CSS
Chapter 2: Selectors and Structure
Chapter 3: Units and Values
Chapter 4: Text Properties
Chapter 5: Fonts
Chapter 6: Colors and Backgrounds
Chapter 7: Boxes and Borders
Chapter 8: Visual Formatting
Chapter 9: Positioning
Chapter 10: CSS2: A Look Ahead
Chapter 11: CSS in Action
Appendix A: CSS Resources
Appendix B: HTML 2.0 Style Sheet
Appendix C: CSS1 Properties
Appendix D: CSS Support Chart
Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

P SPAN {font-weight: 700;} /* this will also be bold */ STRONG {font-weight: lighter;} /* lighter than its parent */ B {font-weight: lighter;} /*lighter still */ <P> 900 <SPAN> 700 <STRONG> 400 <B> 300 <STRONG> 200 </STRONG></B></STRONG></SPAN>. </P> <!-- ...or, to put it another way... --> <P> bold <SPAN> bold <STRONG> regular <B> regulardiscs instead of numbers. In fact, the default value oflist-style-type is disc, so youmight theorize that without explicit declarations to the contrary,all lists (ordered or unordered) will use discs as the bullet foreach item. In fact, that's up to the user agent to decide. Evenif the user agent doesn't have a predefined rule such asOL {list-style-type:decimal;}, it may prohibit ordered bullets frombeing applied to unordered lists, and vice versa. You can'tcount on this, of course, so be careful.

The advantage of this rule is that, since you don't have toworry about one floated element obscuring another, you can be assuredthat all of your floated content will be visible. This makes floatinga fairly safe thing to do. The situation is markedly different whenusing positioning, where it is very easy to cause elements tooverwrite one another.

3. The right outer edge of a left-floating element may notbe to the right of the left outer edge of any right-floating elementto its right. The left outer edge of a right-floating element may not an unordered or ordered list. This style applies to elements with adisplay value of list-item(e.g., <LI> elements). The position of theimage with respect to the content of the list item is defined usinglist-style-position.


t of the listitem. Applies to elements with a display value oflist-item. If the bullet is set to beoutside, then it is placed in the margin of the Since the "tall" text has equal values for font-size and line-height, its content height and inline box are the same thing. However, consider this:

<P STYLE="font-size: 12px; line-height: 12px;">
This is text, <EM>some of which is emphasized</EM>, plus other text<BR>
which is <B STYLE="font-size: 24px;">boldfaced</B>
and <SPAN STYLE="vertical-align: top; line-height: 4px;">tall</SPAN>
and which is<BR>