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 Pukli
Balazs Pukli
46,070 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 Pukli
Balazs Pukli
46,070 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 Pukli
Balazs Pukli
46,070 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?

Yoke Lee
Yoke Lee
2,856 Points

'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.