Home » Html » CSS Language Speak: Container vs Wrapper?

CSS Language Speak: Container vs Wrapper?

Posted by: admin December 31, 2017 Leave a comment

Questions:

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

Answers:

There is no difference between them.

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

Questions:
Answers:

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 the 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>

Questions:
Answers:

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.