Sometimes the first bits of HTML we write in a new document are the elements that wrap everything else on the page. wrapper is a common term in html. We give it a class that is responsible for encapsulating all visible elements on the page.
I've been trying to find the best way to use it.
I found a related thread
on StackOverflow with over 250k views and apparently I'm not the only one wondering about this! I will summarize my latest thoughts in this article.
Before we dive into it, let's take a look at the difference between "wrapper" and "container".
“Wrapper” vs “Container”
I believe there is a difference between
wrapper
and
container
elements.
In programming languages, containers are often used for structures that can contain multiple elements. Wrappers, on the other hand, are wrapped around a single object to provide more functionality and interfaces.
So, in my opinion, it makes sense to have two different names because they have different functions.
Speaking of wrappers, one usually thinks of a <div> that contains the rest of the HTML for the document. I'm sure many of us have gone through a time where we set it to a width of 960px and then center align it.
Container, on the other hand, is usually used for another kind of control. Sometimes it is necessary to implement the behavior or styles of multiple components. It is used for the purpose of grouping elements both semantically and visually. As an example, Bootstrap has a "container classes" to house their grid system or contain various other components.
Wrapper and container can also represent the same thing, it depends on the developer's idea. There may also be other conventions, so the best advice is usually to implement whatever makes the most sense to you. But remember, naming is one of the most important parts of developer activity. Naming conventions make our code more readable and predictable. Choose carefully!
Here is an example of a general page wrapper:
/**
* 1. Centers the content. Yes, it's a bit opinionated.
* 2. See the "width vs max-width" section
* 3. See the "Additional Padding" section
*/
.wrapper {
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 width for a block-level element will prevent it from expanding to the edges of its container (friendly for things like readable line length). Therefore, the wrapper element will occupy the specified width. This problem occurs when the browser window is narrower than the specific width of the wrapper. This will trigger a horizontal scrollbar, which is almost always undesirable.
Use max-width instead, in this case a narrower browser window is better. This is important when using the website on small devices. Here's a good example to demonstrate the problem.
HTML：
<div class="width">This div element has width: 960px;</div>
<br />
<div class="max-width">This div element has max-width: 960px;</div>
<br />
<strong>Note:</strong> Drag the browser window to smaller than 960px wide, to see the difference between the two divs!
CSS：
/**
* The problem with this one occurs
* when the browser window is smaller than 960px.
* The browser then adds a horizontal scrollbar to the page.
*/
.width {
width: 960px;
margin-left: auto;
margin-right: auto;
border: 3px solid #73AD21;
}
/**
* Using max-width instead, in this situation,
* will improve the browser's handling of small windows.
* This is important when making a site usable on small devices.
*/
.max-width {
max-width: 960px;
margin-left: auto;
margin-right: auto;
border: 3px solid #73AD21;
}
/**
* Credits for the tip: W3Schools
* https://www.w3schools.com/css/css_max-width.asp
*/
Click me to see the effect
When it comes to responsiveness, max-width is the better choice!
Additional Padding
I see a particular edge case that a lot of developers forget about. Suppose we have a wrapper with max-width set to 980px. The edge case occurs when the user's device screen width is exactly 980px. The content will be glued completely to the edges of the screen, leaving no empty space.
We usually want a little padding around the edges. That's why if I needed to implement a wrapper with a total width of 980px, I would do:
.wrapper {
max-width: 960px; /* 20px smaller, to fit the paddings on the sides */
padding-right: 10px;
padding-left: 10px;
/* ... */
}
So that's why adding padding-left and padding-right to the wrapper might be a good idea, especially on mobile.
Alternatively, consider using a box size so that the padding doesn't change the overall width.
which HTML element to select
Wrapping has no semantics. It just saves all visible elements and content on the page. It's just a generic container. Semantically, <div> is the best choice. Its <div> has no semantics either, it's just a generic container.
One might wonder if there is a <section> element that might serve this purpose. However, the W3C specification states the following:
The <section> element is not a normal container element . Authors are encouraged to use div elements instead when elements are required for styling purposes only or as a convenience for scripting. The general rule is that the section element applies only if the element's content is explicitly listed in the document's outline.
The <section> element carries its own semantics. It represents a thematic grouping of content. The subject of each section should be identified, usually by making the heading (the h1-h6 element) a child of the section element.
Examples of chapters would be chapters, individual tabbed pages in a tabbed dialog, or numbered sections of papers. The home page of the website can be divided into several sections, introduction, news items and contact information.
This might not seem obvious, but yes! Plain ol' <div> works best with wrappers!
Using the <body> tag vs using an extra <div>
It's worth mentioning that there are some instances where the <body> element can be used as a wrapper. The following implementation will work perfectly fine:
body {
margin-right: auto;
margin-left: auto;
max-width: 960px;
padding-right: 10px;
padding-left: 10px;
}
This way you will have one less markup element.
However, due to flexibility and resiliency, I would not recommend this. Imagine if, at a later stage of the project, these situations might occur:
You need a footer to be fixed at the end of the document (the bottom of the viewport when the document is shorter). Even if you can do it the most modern way - with flexbox, you need an extra wrapper <div>.
You need to set the background color of the entire page. Since the body tag has a max-width, it is not possible to use it. However, you can set the background color using the <html> tag instead of the <body> tag. But I need to admit that I don't know much about this piece. I looked
at HTML vs Body in CSS
and it's a bit unusual for me. However, applying a background color to the <html> element sounds a little weird, doesn't it?
I've come to the conclusion that adding a <div> to implement a CSS wrapper is the best thing to do. This way you don't have to add the wrapper again if the spec requirements change later, and deal with moving styles. After all, we're only talking about one extra DOM element.
http://igeekbar.com/igeekbar/post/322.htm