Menu
I have heard a lot of my friends talk about using wrappers in CSS to center the "main" part of a website.
Is this the best way to accomplish this? What is best practice? Are there other ways?
282
Wrappers are also used for things like applying a sticky footer. 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.
What is a HTML Wrapper? An HTML wrapper allows you to center content within a webpage. This simple strategy requires CSS (either in the header of the document in a. tag – or ideally in a separate style sheet) to make the wrapper work.
Wrappers provide the overall structure or frame of a web page. They generally contain static information that is common across all web pages, such as header branding, section navigation, and company logo. A web site can have more than one wrapper.
Like last time, you must know the width and height of the element you want to center. Set the position property of the parent element to relative . Then set the child's position property to absolute , top to 50% , and left to 50% . This just centers the top left corner of the child element vertically and horizontally.
Most basic example (live example here):
CSS:
#wrapper { width: 500px; margin: 0 auto; } HTML:
<body> <div id="wrapper"> Piece of text inside a 500px width div centered on the page </div> </body> How the principle works:
Create your wrapper and assign it a certain width. Then apply an automatic horizontal margin to it by using margin: 0 auto; or margin-left: auto; margin-right: auto;. The automatic margins make sure your element is centered.
139
The best way to do it depends on your specific use-case.
However, if we speak for the general best practices for implementing a CSS Wrapper, here is my proposal: introduce an additional <div> element with the following class:
/** * 1. Center the content. Yes, that's a bit opinionated. * 2. Use `max-width` instead `width` * 3. Add padding on the sides. */ .wrapper { margin-right: auto; /* 1 */ margin-left: auto; /* 1 */ max-width: 960px; /* 2 */ padding-right: 10px; /* 3 */ padding-left: 10px; /* 3 */ } ... for those of you, who want to understand why, here are the 4 big reasons I see:
max-width instead width In the answer currently accepted Aron says width. I disagree and I propose max-width instead.
Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Therefore, the Wrapper element will take up the specified width. The problem occurs when the browser window is smaller than the width of the element. The browser then adds a horizontal scrollbar to the page.
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. Here’s a good example showcasing the problem:
/** * 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 */<div class="width">This div element has width: 960px;</div> <br /> <div class="max-width">This div element has max-width: 960px;</div>So in terms of Responsiveness, is seems like max-width is the better choice!-
I’ve seen a lot of developers still forget one 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 not any breathing space left.
Generally, we’d want to have a bit of padding on the sides. That’s why if I need to implement a Wrapper with a total width of 980px, I’d do it like so:
.wrapper { max-width: 960px; /** 20px smaller, to fit the paddings on the sides */ padding-right: 10px; padding-left: 10px; /** ... omitted for brevity */ } 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.
<div> Instead of a <section> By definition, the Wrapper has no semantic meaning. It simply holds all visual elements and content on the page. It’s just a generic container. Therefore, in terms of semantics, <div> is the best choice.
One might wonder if maybe a <section> element could fit this purpose. However, here’s what the W3C spec says:
The element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
The <section> element carries it’s own semantics. It represents a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.
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 old <div> fits best for a Wrapper!
<body> Tag vs. Using an Additional <div> Here's a related question. Yes, there are some instances where you could simply use the <body> element as a wrapper. However, I wouldn’t recommend you to do so, simply due to flexibility and resilience to changes.
Here's an use-case that illustrates a possible issue: Imagine if on a later stage of the project 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, I guess you need an additional Wrapper <div>.
I would conclude it is still best practice to have an additional <div> for implementing a CSS Wrapper. This way if spec requirements change later on you don't have to add the Wrapper later and deal with moving the styles around a lot. After all, we're only talking about 1 extra DOM element.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
