{"id":257497,"date":"2017-08-09T05:20:44","date_gmt":"2017-08-09T12:20:44","guid":{"rendered":"http:\/\/css-tricks.com\/?p=257497"},"modified":"2017-10-25T16:30:11","modified_gmt":"2017-10-25T23:30:11","slug":"best-way-implement-wrapper-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/best-way-implement-wrapper-css\/","title":{"rendered":"The Best Way to Implement a “Wrapper” in CSS"},"content":{"rendered":"
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<\/em> is common for that. We give it a class, and that class is responsible for encapsulating all visual elements on the page.<\/p>\n I’ve always struggled to with the best way to implement it. I found a related thread on StackOverflow<\/a> 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.<\/p>\n <\/p>\n Before we dive into it, let’s first examine the difference between the “wrapper” and the “container”.<\/p>\n I believe there is a difference between wrapper<\/em> and container<\/em> elements.<\/p>\n 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.<\/p>\n So, in my opinion, it makes sense to have two different names because they intend different functions.<\/p>\n Speaking of the wrapper, it’s common to think of a The container<\/em>, 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<\/a> “container classes<\/a>” that house their grid system or contain various other components.<\/p>\n 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!<\/p>\n Here’s an example of a general page wrapper:<\/p>\n Setting the Using See the Pen CSS-Tricks: The Best Way to Implement a CSS Wrapper<\/a> by Kaloyan Kosev (@superKalo<\/a>) on CodePen<\/a>.<\/p>\n In terms of responsiveness, I’ve seen a lot of developers forget one particular edge case. Let’s say we have a wrapper with “Wrapper” vs “Container”<\/h3>\n
<div><\/code> that contains all the rest of the HTML of the document. I’m sure many of us have lived through a time where we set that to 960px in width and center aligned all our main content. Wrappers are also used for things like applying<\/a> a<\/a> sticky footer<\/a>.<\/p>\n
\/**\r\n * 1. Centers the content. Yes, it's a bit opinionated.\r\n * 2. See the \"width vs max-width\" section\r\n * 3. See the \"Additional Padding\" section\r\n *\/\r\n.wrapper {\r\n margin-right: auto; \/* 1 *\/\r\n margin-left: auto; \/* 1 *\/\r\n\r\n max-width: 960px; \/* 2 *\/\r\n\r\n padding-right: 10px; \/* 3 *\/\r\n padding-left: 10px; \/* 3 *\/\r\n}<\/code><\/pre>\n
width vs max-width<\/h3>\n
width<\/code> 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.<\/p>\n
max-width<\/code> 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.<\/p>\n
max-width<\/code> is the better choice!<\/p>\n
Additional Padding<\/h3>\n
max-width<\/code> 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.<\/p>\n