LAYOUTS - CSS: Professional Techniques for Modern Layout - page 148

h at's all i ne as long as the text doesn't get longer than one line, of course. If it does run to
two lines, then the box will hang down from the divider, not recenter itself; and the box will
be split up between the lines. h ere really isn't a good solution for this using negative margins.
You could just drop the border and keep the white background. h at wouldn't be perfect, but
it might be good enough.

Figure 4-44: “Shrink-wrapping” the text of a heading with a box.

POSITIONING WITHIN A CONTEXT
One thing that hasn't really been touched upon in this chapter is the use of positioning. h at's
because positioning—by which, in this case, I mean absolute positioning—is usually a bad
choice for large-scale layout. Not always, but usually.

150

h e reason for this is that if you absolutely position an element, it is entirely removed from
the normal l ow of the document. h at means that wherever it ends up, other elements will
act like it's not even there. h us, overlapped content is a common result of absolute
positioning.

It's kind of a shame, because it would be really simple if you could position, say, columns of a
page and not worry about them completely overlapping the page's footer.

However, don't lose heart: You can easily use absolute positioning within limited contexts, like
headers or footers. Consider this header's markup:

< div class ="header">
< a href ="/">< img src ="logo.png" alt ="ConHugeCo Inc. " ></ a >
< ul class ="nav">
< li >< a href ="index.html"> Home </ a ></ li >
< li >< a href ="products.html"> Products </ a ></ li >
< li >< a href ="buy.html"> Buy! </ a ></ li >
< li >< a href ="contact.html"> Contact </ a ></ li >
</ ul >
< form method ="get" action ="/search">