Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Ashim Poudyal
seal-mask
.a{fill-rule:evenodd;}techdegree
Ashim Poudyal
Full Stack JavaScript Techdegree Student 5,824 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.

3 Answers

Shane Gifford
Shane Gifford
5,046 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.

Kishan P
Kishan P
9,921 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.

can you use the body tag as a wrapper? or is it better to use a div tag still?

like this:

<body class="wrapper">

</body>