Styling Layout Wrappers in CSS

Styling Layout Wrappers in CSS

A website content should be wrapped or contained in a width that makes the content easy to read. To achieve that, we can use what has been called a wrapper, or a container. Using a wrapper in CSS can be possible in different ways which might introduce some challenges along with it. In this article, I will explain about layout wrappers in CSS, how they work, how to use them, and when not to use them. Notice that throughout this article, I might mention the terms wrapper and container, and both of them means the same. Are you ready? Let’s dive in! A brief about wrappers When you hear the word wrapper or container, it’s actually means that a group of elements is wrapped or contained inside another element. Without using additional elements, we can add a wrapper to the element as below: body { max-width: 1170px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; } However, adding the wrapper to the element might not practical for today’s work. The wrapper element can prevent child items from going outside its boundaries. Consider the following figure: We have aside and main elements, and they live inside another element that wraps them. The .wrapper element has a width, of course. … … Without a wrapper, the child elements will stick to the edges of the screen. This can be very annoying to the user, especially on a large screen. The figure above shows how the elements will stretch when there is no element wrapping them. This behavior isn’t something that a user should experience. Let me explain the reason behind that. Why page wrappers are necessary Using a page wrapper can have many benefits that you should be aware of them as a designer or a developer. Here are some of the benefits: Making the content more readable. Without a wrapper, content like text and images can stretch to fill the whole width of the screen. For small screens, this might seems ok. However, for a large screen, this is extremely annoying. Grouping design elements are better for adding spacing. Dividing design elements into columns can’t be done easily without a wrapper. Implementing a wrapper in CSS Now that you understand the basics and the benefits of a wrapper, let’s explore how to build one in CSS. Adding the width The first thing to decide about when implementing a wrapper is the width of it. How do you want the wrapper width to be? That depends on your design. Generally speaking, having a wrapper width that ranges between 1000px – 1300px is the most commonly used. The popular framework Bootstrap, for example, uses a width of 1170px. .wrapper { width: 1170px; } However, it’s not recommended to use the width property as it will cause horizontal scrolling when the screen size is less than 1170px. You can solve it by adding max-width, though. .wrapper { width: 1170px; max-width: 100%; } While this works, you can get rid of width and use the max-width only as the following. .wrapper { max-width: 1170px; } Now that we added the width for the wrapper. Let’s move on to centering it. Centering the wrapper To center the wrapper, you should add an auto margin from the left and right sides. See the following: .wrapper { max-width: 1170px; margin: 0 auto; } According to the CSS spec,  » Read More

Like to keep reading?

This article first appeared on If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply