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

You might think the links are a little too close to the header. h at's easy to i x: Increase the
value for top . But maybe you want to place the links exactly seven pixels below the bottom of
the header. In that case, you could dei ne the exact height of the header, then do the math to
i gure out what percentage value would add seven pixels to the of set. Or you could just dei ne
a top margin of seven pixels for the navigation (see Figure 4-48).

.nav { position : absolute ; top : 100% ; right : 0 ;
margin-top : 7px ;}

Figure 4-47: Placing the links outside the header.

153

Figure 4-48: Pushing the links down a bit with a top margin.

h anks to the fact that top and margin-top have separate layout ef ects, you can do this
sort of thing in a way that simulates simple equations. h at is, the top edge of the navigation
links' content area is 100% + 7px below the top edge of the header (where “100%” means “the
entire height of the header” in this case).

Another interesting example of placing information outside its containing block is to take
some date-and-time information for a blog post and put it to the side. Consider this markup
structure:

< div class ="entry">
< h2 >Positioning in Context</ h2 >
…
< hr >
< ul class ="datetime">
< li > Tuesday, 18 May 2010 </ li >
< li > 15:26:37 -0400 </ li >
</ ul >
</ div >