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!

Popularity: 9% [?]

Share and Enjoy:
  • del.icio.us
  • Digg
  • Reddit
  • TwitThis
  • Google Bookmarks
  • StumbleUpon
  • Facebook
  • E-mail this story to a friend!
  • Print this article!