the right side of the browser window. This is just what we expect. However, some interesting issues are raised in the course of floating elements in CSS.

Figure 7-63

Figure 7-63. A floating image

7.6.1. Floated Elements

There are a few things to keep in mind with regard to floating elements. In the first place, a floated element is in some respects removed from the normal flow of the document, although it still Friday 19th of January 2018 12:53:57 AM

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.

Figure 8-22

Figure 8-22. The effects of a negative top margin

With a negative bottom margin, though, it looks as though everything following the paragraph has been pulled upward. Compare the following markup to the situation shown in Figure 8-23:

DIV {border: 1px solid black;}
P.neg {margin-bottom: -50px; width: auto; margin-right: 10px;
margin-left: 10px; border: 3px solid gray;}
<DIV STYLE="width: 420px; background-color: silver;
padding: 10px; margin-top: 75px;">extension of .css, as insheet1.css.

The filename extension is not required, but some browsers won'trecognize the file as containing a style sheet unless it actuallyends with .css, even if youdo include the correct TYPEof text/css in the LINKelement. So make sure you name your style sheets appropriately.