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

HTML

Adam Akers
Adam Akers
7,357 Points

When to use a wrapper or container?

I've been looking around on when to use a wrapper or container, but it doesn't really make sense to me. I've been looking at source code now for awhile, but it seems that people use them in different places, if at all.

So my ultimate question is when should I be using a container and where should I be putting it in my HTML?

3 Answers

I guess when you need several elements/bits of content kept together. A common use is to center all of the pages content. Rather than set each elements margin, just pop them all in a pre-centered wrapper div.

Chris Howell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Chris Howell
Python Web Development Techdegree Graduate 49,702 Points

To add on to Jamie's answer:

Containers have broad uses and are great for separation of elements or groups of elements. Technically all the elements themselves are in-a-way their own container for your text or images. Most uses of for containers are for alignment purposes of your page, like Jamie said. You can use 1 "container" to wrap up your whole page in that would share the same CSS properties. Example: Maybe for your page you have just a navigation at the very top and a main body(very simple example). Lets say the navigation you want an image to start from the left side of the browser window and stretch the entire length. But the main body you dont want your text or any elements as close to the border of the browser window. Well you could create a DIV container that you would wrap ONLY around the main body elements and leave the navigation elements above(outside) the container. Then you could apply some CSS styles to it that you would want to flow through the entire main body, such as a Margin of 20px so it would push all text or elements away from the border of the browser window.

This of course is a simplified version of what you can do with it.

When you need to wrap or contain divs.