Figure 8-38

Figure 8-38. Get as far to the left (or right) as possible

8.3.2. Applied Behavior

There are a number of interestingconsequences of the above rules, both because of what they say andwhat they don't say. The first thing to discuss is what happenswhen the floated element is taller than itsparent element. Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 25th of February 2018 10:25:48 PM


6.3. Summary

Setting colors and backgrounds on elements gives authors a great deal of power in CSS. The advantage of CSS over traditional methods is that colors and backgrounds can be applied to any element in a document -- not just table cells, for example, or anything enclosed in a FONT tag. Despite a few bugs in some implementations, like Navigator 4's reluctance to apply a background to the entire content area of an element, these are very widely used properties. Their popularity isn't too hard to understand, either, since color is one easy way to distinguish the look of one page from another.

CSS allows for a great deal more in the way of element styling, however: borders that can be placed on any element, extra margins and padding, and even a way to "float" elements other than images. These are all covered in the next chapter.



Library Navigation Links

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

While it's nice to haveshorthand properties like border-color andborder-style, they aren't always a whole lotof help. For example, you might want to set all H1elements to have a thick, gray, solid border, but only along thebottom. There are two ways to accomplish this:

H1 {border-bottom-width: thick;   /* option #1 */border-style: none none solid;border-color: gray;}
Figure 8-23

Figure 8-23. The effects of a negative bottom margin

What's really happening in Figure 8-23 is that the elements following the DIV are placed according to the location of the bottom of the DIV. As we can see, the end of the DIV is actually above the visual bottom of its child paragraph. The next element after the DIV is the appropriate distance from the bottom of the DIV. The fact that it overlaps the paragraph doesn't matter, at least not technically.

Figure 7-11

Figure 7-11. Percentage margins and changing environments

As you can imagine, this leads to the possibility of"fluid" pages, where the margins and padding of elementsenlarge or reduce to match the actual size of the display canvas. Intheory, as the user changes the width of a browser window, themargins and padding will expand or shrink dynamically -- but notevery browser supports this sort of behavior. Still, usingpercentages for margin andpadding may be the best way to set styles that