Wrappers – beginning to control layout

  • Post author:
  • Post category:CSS
  • Post comments:0 Comments

I’ve added a wrapper to my code. A wrapper essentially has several functions.

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>My website</title>
   <meta charset="UTF-8">
   <link rel="stylesheet" a href="browser-reset.css">
   <link rel="stylesheet" a href="style.css">
  </head>
  <body>
    <!-- div wrapper now around narivation menu
    and the content -->
    <div class="menu-content-wrapper">
     <nav>
        <ul>
          <li><a href="http://www.google.com" target="_blank">Google</a></li>
          <li><a href="http://www.bing.com" target="_blank">Bing</a></li>
          <li><a href="http://www.yahoo.com" target="_blank">Yahoo</a></li>
          <li><a href="http://www.youtube.com" target="_blank">Youtube</a></li>
        </ul>
      </nav>
     <h1>This is the first page</h1>
     <p>This it some first page content</p>
    </div>
  </body>
</html>
  • allows styling for all of the contents within the wrapper tags – e.g. a commong border or background image
  • to separate element semantically – e.g. to separate the menu, header, content and footer
  • to group elements in the layout, so that they stay in the same column when columns are floated next to each other

The following has been added to the top of the style.css

.menu-content-wrapper {
  /* 0 pixels top and bottom
  auto left and right */
  margin: 0 auto;
  width: 900px;
}

Leave a Reply