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
Reggie Sibley
6,018 Points<div>
What is the reason behind wrapping or nesting a <div> element within another <div>? For Example:
<body> <div class="container"> <div class="header"> <h1> Header Content </h2> </div> </div>
What purpose does the <div class="container"> provide in this circumstance? A code pen showing what it does or a thorough explanation explaining what the purpose of it is for would be helpful, like in this instance if i wanted to move the <h1> center of the page, would it make a difference if i targeted the .container class or would i target the .header class? PLEASE HELP
1 Answer
bleedcmyk
5,945 PointsA very common use is creating "wrappers" for centering content. Floating div's for example will be constrained to the width of their container. If you put two 500px width floating div's in a container wrapper that is 1000px width, you suddenly have a two column layout that is 1000px wide.
Another reason is that a lot of styles get inherited from the parent div. Display: None on a parent will also apply to all of the content inside. etc.
In your example you would target the container class(Or body) and give it margin: 0 auto; to make all of the content inside center. The text inside .header would still be left justified because text-align: left would still be defaulted.
Take a look at this codepen to see the centering in action.