Sometimes the first bit of HTML we write in a new document is an element that wraps everything else on the page. The term wrapper is common for that. We give it a class, and that class is responsible for encapsulating all visual elements on the page.
I’ve always struggled to with the best way to implement it. I found a related thread on StackOverflow that has more than 250,000 views, so obviously I’m not the only one wondering! I’ll sum up my latest thoughts in this article.
Before we dive into it, let’s first examine the difference between the “wrapper” and the “container”.
“Wrapper” vs “Container”
I believe there is a difference between wrapper and container elements.
In programming languages, the word container is generally used for structures that can contain more than one element. A wrapper, on the other hand, is something that wraps around a single object to provide more functionality and interface to it.
So, in my opinion, it makes sense to have two different names because they intend different functions.
Speaking of the wrapper, it’s common to think of a
The container, on the other hand, usually intends another kind of containment. One that sometimes necessary to implement a behavior or styling of multiple components. It serves the purpose of grouping elements both semantically and visually. As an example, Bootstrap has “container classes” that house their grid system or contain various other components.
The terms wrapper and container can also mean the same thing depending on the developer and what they intend. There might be other conventions too, so the best advice is usually to implement whatever makes the most sense to you. But remember, naming is one of the most fundamental and important parts of developer activities. Naming conventions make our code more readable and predictable. Choose carefully!
Here’s an example of a general page wrapper:
* 1. Centers the content. Yes, its a bit opinionated.
* 2. See the width vs max-width section
* 3. See the Additional Padding section
margin-right: auto; /* 1 */
margin-left: auto; /* 1 */
max-width: 960px; /* 2 */
padding-right: 10px; /* 3 */
padding-left: 10px; /* 3 */
width vs max-width
Setting the width of a block-level element will prevent it from stretching out to the edges of its container (good for things like readable line lengths). Therefore, the wrapper element will take up the specified width. The problem occurs when the browser window is narrower than the specific width of the wrapper. That will trigger a horizontal scrollbar, which is almost always undesirable.
Using max-width instead, in this situation, is better for narrower browser windows. This is important when making a site usable on small devices. Here’s a good example showcasing the problem.
See the Pen CSS-Tricks: The Best Way to Implement a CSS Wrapper by Kaloyan Kosev (@superKalo) on CodePen.
In terms of responsiveness, max-width is the better choice!
I’ve seen a lot of developers forget one particular edge case. Let’s say we have a wrapper with max-width set to 980px. The edge case appears when the user’s device screen width is exactly 980px. The content then will exactly glue to the edges of the screen with no breathing room left.
The “no breathing room left” problem.
We usually want a bit of padding on the edges. That’s why if I need to implement a wrapper with a total width of 980px, I’d do it like so:
max-width: 960px; /* 20px smaller, to fit the paddings on the sides */
/* … */
Therefore, that’s why adding padding-left and padding-right to your wrapper might be a good idea, especially on mobile.
Or, consider using box-sizing so that the padding doesn’t change the overall width at all.
Which HTML Element to Choose
A wrapper has no semantic meaning. It simply holds all visual elements and content on the page. It’s just a generic container. In terms of semantics,
One might wonder if maybe a
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.
It might not seem very obvious at first sight, but yes! The plain ol’
Using the tag vs. Using an additional
And it will result in one less element in your markup because you can drop that unnecessary wrapper
However, I wouldn’t recommend this, due to flexibility and resilience to changes. Imagine if on a later stage of the project any of these scenarios happen:
You need to enforce a footer to “stick” to the end of the document (bottom of the viewport when the document is short). Even if you can use the most modern way to do it – with flexbox, you need an additional wrapper
You need to set the background-color of the whole page. Normally, whatever background you set on the will behave as if it was set on the element should it not already have a background. Just a weird thing in CSS. But if your element does already have a background, and you set the body to something else, and the body has any kind of spacing constraint, backgrounds will get weird. It’s a tricky thing.
I would conclude it is still best practice to have an additional