Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Ashim Poudyal
Full Stack JavaScript Techdegree Student 5,824 PointsI 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
5,046 PointsHe 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ée chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
</div>
<footer class="main-footer">
<span>©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
9,921 PointsHi, 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.
Jonathan Guerrero
Front End Web Development Techdegree Graduate 18,245 Pointscan you use the body tag as a wrapper? or is it better to use a div tag still?
like this:
<body class="wrapper">
</body>