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 Responsive Layouts Media Queries Understanding Breakpoints

pat barosy
pat barosy
6,759 Points

Container and wrapper divs

Hello,

Why does Nick employ both a container div and a wrapper div? I thought that they were ostensibly the same thing.

6 Answers

pat barosy
pat barosy
6,759 Points

Thank you for this.
I will check out your suggestion when I get to a larger computer. All of this gets confusing when body, html, wrapper, & container are all used for styling purposes in CSS, & I don't know when to apply which one.

Balazs Peak
Balazs Peak
46,076 Points

The 2 elements nested inside each-other are responsible for 2 different things.

The outer part named "container" is responsible for the background color and the border between the header and the main area.

The inner part named "wrapper" is responsible for the width, and it wraps the menu items together. Also it grows when resizing the window, it is referenced in the media queries.

To understand this ASAP, check one single thing: If you resize the window to extremely wide (I hope you have a monitor large enough, maybe consider zooming out with "Ctrl -" key combination), the menu items won't grow more from a point. they will stay the same size in the middle. Whereas the color design of the header (the background color and the slightly darker border line) will grow always to be as wide as the screen. This is exactly the thing that is possible with the architecure of the 2 different elements nested inside each other!

I encourage you to use Chrome Dev Tools to turn on and off these css rules to see what happens to the DOM!

Balazs Peak
Balazs Peak
46,076 Points

I've made a picture for you, so that you can see the functionality. But don't skip the devtools step and check it out for yourself as well!

alt text

Balazs Peak
Balazs Peak
46,076 Points

You can name these however you want. Maybe different front-end developers or front-end frameworks will name them slightly differently. What's important is the logic behind it, which is, in this case:

  • there is an element which makes the color, and it spreads full-wide in the browser,
  • and there is another one which "wraps" the logo and menu items together with limited width in the middle
pat barosy
pat barosy
6,759 Points

Wow!!!! Thank you so much!!! I think I get it now. I'm so used to seeing container & wrapper used interchangeably. So, Nick could have named this wrapper-nav or whatever & it would've been the same thing?

'container' and 'wrapper' are just two common words used (semantically) for layout purpose. in Nick's example, 'container' is used as horizontal box placeholder (think lego stack) and 'wrapper' to "wrap" the content nicely leaving ample whitespace on its left and right.