CSS CSS Layout Basics Getting Started with CSS Layout Creating a Layout Wrapper

Ashim Poudyal
Ashim Poudyal
Front End Web Development Techdegree Student 3,452 Points

I still dont understand why use wrapper. can someone clarify please!

As in the video, it will create margin on left side and right of the screen but why do that. i do not understand why is wrapper used.

2 Answers

Kishan P
Kishan P
9,517 Points

Hi, Ashim Poudyal

.WRAPPER is just a class name and you can name anything you want but by referring to specific word makes your code cleaner and easy to read. Basically putting your content in a div tag with class wrapper helps your content to get centered and apply margin easy, if u don't use div tag to wrap your content you would have to specificity margin: 0 auto for all the tags to get centered.

Shane Gifford
Shane Gifford
5,044 Points

He didn't do it in the video so it might not be clear, but in the workspace (after following along the video) try moving the footer outside the div you just created, but still inside the body tag, like so:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Best City Guide</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div class="wrapper">
      <header class="main-header">
        <h1 class="name"><a href="#">Best City Guide</a></h1>
        <ul class="main-nav">
          <li><a href="#">ice cream</a></li>
          <li><a href="#">donuts</a></li>
          <li><a href="#">tea</a></li>
          <li><a href="#">coffee</a></li>
        </ul>
      </header>

      <h2>Welcome!</h2>
      <p>Everything in this city is worth waiting in line for.</p>
      <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
      <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>

      <h2>Great food</h2>
      <p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee drag&#233;e chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
    </div>
    <footer class="main-footer">
      <span>&copy;2015 Residents of The Best City Ever.</span>
    </footer>
  </body>
</html>

When you reload you can see your footer does not have the margins that the rest of the content does. This is the advantage of the "wrapper" element, allowing you to keep your html organized the same way (you don't have to move footer out of the body) while only applying the style to certain parts of it.