TIPS - CSS: Professional Techniques for Modern Layout - page 99

< body>
< div class="wrapper">
…
</ div>
</ body>

h e rationale here is usually that you want to center the content, or otherwise have a couple of
containers sitting outside the content. In this case, it's the body and the div . So with that
markup, you'll ot en see this kind of CSS:

body { background : #ABACAB ; text-align : center ;}
div.wrapper { width : 800px ; margin : 0 auto ; text-align : left ;)

h at's the classic “center the design even in old versions of IE, which didn't understand auto
margin centering but thought text-align should be used to center element blocks”
technique.

But there were already two elements containing the page's content, even without the extra
div : the body and html elements. Yes, you can style html . Why not? To CSS, it's just
another element. h ere's nothing magic or even particularly special about it, save that it's the
topmost element in the document tree and therefore the “root” element.

So we can just take the preceding rules and alter them ever so slightly:

101

html { background : #ABACAB ; text-align : center ;}
body { width : 800px ; margin : 0 auto ; text-align : left ;)

Now we can remove the “wrapper” div entirely, with no change in layout, as shown in Figure
3-24.

At er you realize that both body and html are available for your styling, you can do a
number of interesting things. For example, suppose you have a design that calls for a two-tone
stripe across the top of the page, with a logo inside the stripe. You can probably think of a way
to do that with a div . Here's an alternate approach that doesn't require one (see Figure 3-25):

html { border-top : 5px solid navy ;}
body { border-top : 55px solid silver ; margin : 0 ; padding : 0 ;}
img.logo { position : absolute ; top : 10px ; left : 10px ;}