CODEWITHSUNDEEP
htmlcss
keruilin
keruilin

Reputation: 17512

CSS Language Speak: Container vs Wrapper?

What's the difference between container and wrapper? And what is meant by each?

Upvotes: 70

Views: 64753

Answers (4)

Edgar Quintero
Edgar Quintero

Reputation: 4441

I like to throw in something here:

With current CSS standards and best practices, usually you have a container element that has the display: grid property. This div contains all the columns and rows of the layout. It also has a viewport wide background color, border and shadow. These properties are displayed using the entire width of the browser.

Now you need to add the content. You have to create another div, this a max-width: 1256px and now you give the margin: 0 auto and width: 100%.

So the structure will be:

<section class="container">
  <div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</section>

This breaks the previous answer's logic of a container having many elements and a wrapper just one, but I've found this approach to be effective when building sections that have specific separate styling from other sections like shadows and borders.

Therefore, in some situations:

A container is for styling the entire width of a section. A wrapper is for styling and centering the max-width content inside it.

Upvotes: 6

m.rufca
m.rufca

Reputation: 2678

According to this answer:

In programming languages the word container is generally used for structures that can contain more than one element.

A wrapper instead is something that wraps around a single object to provide more functionalities and interfaces to it.

This definition matches with meaning of words and it's useful for HTML structures like:

<ul class="items-container">
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
</ul>

Upvotes: 211

sasha
sasha

Reputation: 821

There can be a difference, if you choose to give'em one. Actually it makes sense to have two names for a container/wrapper, as they have different functions:

1) the standard wrap we think of has a width of let's say 960px or 60em and centers its content on the screen (margin:auto)

2) there's another wrap - the one that is in some cases necessary to implement a sticky footer. imo the sticky footer with the best browser support (no js and at least quite clean) is this one: http://ryanfait.com/sticky-footer/

apropos sticky: sticking to existing naming conventions, I like the one of apppie, which clearly distinguishes between wrap 1 (called container) and wrap 2 (called wrapper). see: http://www.apppie.org/pages/approach/naming.html

there might be other conventions. as said, that you distinguish makes sense - how is up to you.

Upvotes: 2

Harmen
Harmen

Reputation: 22438

There is no difference between them.

It's just what you like to call the <div> that, often, contains all content of a page

Upvotes: 9

Related Questions