Adding another box

by Joe Gillespie — Oct 1, 2002

So far, we have three boxes in the layout - 'header', 'content' and 'footer'. I now want to insert another box between the 'header' and 'content' boxes to hold some navigational elements.

#navbar
     {
     color:#99c;
     font-size:10px;
      font-family:Verdana, Geneva, Arial, sans-serif;
      background-color:#fc6;
      text-align: center;
     margin-top:3px;
     margin-bottom:3px;
      padding-top:3px;
     padding-bottom:4px;
     width:100%
     }

It's similar to the 'header' box, 100% width but with a different background color. It also contains its own type style definition, which is different from the rest of the page. It has some top and bottom padding, to give the type some space above and below and it has top and bottom margins to keep the box physically separated from the 'header' and 'content' boxes. The 'padded' area of a box shares the background color of the main part but the margins don't, they are transparent.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float