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

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

Julian Betancourt
Julian Betancourt
11,466 Points
Posted by Julian Betancourt
Julian Betancourt
11,466 Points

Using One Wrapper vs several wrappers

Hi guys, So I've also seen websites that use this approach: CSS:

.container {
  width: 70%;
  margin: 0 auto;
}

HTML:

<section class="container">some markup</section>
<section class="container">some markup</section>
<section class="container">some markup</section>

Is one method better/preferred than the other one?

Thanks!

1 Answer

Casey Ydenberg
Casey Ydenberg
15,622 Points
Casey Ydenberg
Casey Ydenberg
15,622 Points

The best guide is to make markup as simple as you can, but no simpler. If everything on your page fits within a container, then use one container. OTOH, a lot of designs I get have several sections, each with their own background that spans the entire page. In that case, the only solution is to use different full-width elements each with a container inside them.

I don't see much point in just using a series of containers all at the same DOM-level, but there might be something I'm missing.