« WotW: Easy Envelopes
July CSS Off Thoughts »
Aug 08

100% Width Headers

CSS

Width100A design may call for the header or footer to span 100% width of a page, but the body of a design spread to a set width. Easily implement this by extracting the 100% width item from your main container div.

PLAIN TEXT
HTML:
  1. <div id=”header”>
  2.    My header spans 100% of the window.
  3. </div>
  4. <div id=”container”>
  5.    This container has a set width: 60% of the window.
  6. </div>
  7. <div id=”footer”>
  8.    My footer spans 100% of the window.
  9. </div>

PLAIN TEXT
CSS:
  1. body{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. #header, #footer{
  6.     background-color: #ccc;
  7.     color: #000;
  8.     padding: 1em 0 1em 0;
  9.     text-align: center;
  10.     width: 100%;
  11. }
  12. #container{
  13.     margin: 0 auto; /* this centers the div on the window */
  14.     width: 60%;
  15. }

Easy as sliced cake!

This entry was posted on Wednesday, August 8th, 2007 at 5:04 am and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply