Book HomeCascading Style Sheets: The Definitive GuideSearch this book Thursday 28th of August 2014 03:01:46 AM

9.6. Summary

When it comes right down to it, positioning is a very compelling technology. It's also likely to be an exercise in frustration if you're trying to get it to behave consistently in a cross-browser environment. The problem isn't so much that it won't work in some browsers: it's that it will only sort of work in a number of them, such as Navigator 4 and Internet Explorer 4 and 5. It can be great fun to play with positioning, and one day we'll be able to use it in place of tables and frames while dramatically improving accessibility and backward compatibility. As of this writing, though, it remains a great way to create design prototypes, but a tricky thing to use on a public web site.

As it happens, this sentiment may be applied to the majority of CSS2, which is given an overview in the next chapter.


permit floated elements to either side, one H2 in particular has been set so that it does permit floated elements on either side:

H2 {clear: both;}
<H2 STYLE="clear: none;">Not Cleared!</H2>
Figure 7-78

Figure 7-78. Not clear at all

clear works by increasing the top margin of an element so that it ends up below a floated element, so any margin width set for the top of a cleared element should be effectively


Library Navigation Links

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

width must be set to either auto or a non-negative value of some type. CSS also allows browsers to set a minimum value for width, below which a block-level element's width cannot drop. The value of this minimum can vary between browsers, as it is not defined in the specification.

8.2.2.2. Using auto

headline, e.g., <H2 ALIGN="center"> or page division <DIV ALIGN="right">.  Each of these should terminate with a corresponding termination tag </P>, </H2> or </DIV> as appropriate. 

The block-level <CENTER> tag is still a commonly-used alternative (includes its own line breaks).  Use <BLOCKQUOTE> for both-margin indents, <UL> with no list items for left-indents (see below). 
 pointer is "hovering" over an element. For example, whenthe pointer is positioned over a link such that clicking the mousebutton would cause the browser to follow the link, the pointer is"hovering" over the link. This is in some respectssimilar to the somewhat famous JavaScript "rollover"trick, where images change when the pointer hovers over them. Thanksto :hover, you can specify a hover style veryeasily:

A:link {background: white; color: blue;}width: 50%; height: auto; background: silver;">...</P>
Figure 9-20

Figure 9-20. An absolutely positioned paragraph

The paragraph is now positioned at the very beginning of the document, half as wide as the document's width and overwriting the first few elements!

In addition, if the document is scrolled, the paragraph will scroll right along with it. This is because the element's containing block is the BODY element's content area, not the viewport. If you want to position elements so that

<P STYLE="height: 10em;">

In this case, then the extra height is treated somewhat like extra padding, as depicted in Figure 8-3.

Figure 8-3

Figure 8-3. Setting the height property for block-level elements

If, on the other hand, the height is less than that needed to display the content:

<P STYLE="height: 3em;">