The content of web pages should be placed in a certain element, the width of which, limiting the width of the content, allows users to conveniently work with site materials. Such elements are called “wrappers” or “containers”. There are many ways to style containers with CSS. Some ways of working with containers make the designer have to solve quite complex problems.

ITKarma picture

In this article, I’ll talk about containers for the contents of web pages: how they work, how to use them, and when it’s best to do without them. Please note that I will use the terms “wrapper” and “container” here as equivalent.

General information


When you, when talking about a certain element of a web page, find out that it is a wrapper or a container, this means that, in fact, in front of you is a group of elements that is “wrapped” in another element or “placed "Inside this element. If, when setting up a web page, you don’t use additional elements, playing the role of a container for CDMY0CDMY, then you can style this element like this:

body {     max-width: 1170px;     margin-left: auto;     margin-right: auto;     padding-left: 16px;     padding-right: 16px; } 

But under current conditions, using the CDMY1CDMY element as a container may not be practical. The container allows you to prevent children from leaving its borders.

ITKarma picture

The container does not allow children to go beyond its borders

There is a side and main area of ​​the page. Both of these areas are inside the container element. He is assigned the class CDMY2CDMY. Among other properties of the container, of course, its width is also given. The structure of the HTML code for this page looks like this:

<div class="wrapper">     <aside>...</aside>     <main>...</main> </div> 

Without the use of a wrapper element, child elements will be placed, focusing on the edges of the screen. This may be inconvenient for users. Especially for those who work on large screens.

ITKarma picture

Page without a container element that includes its contents

It shows how elements, stretching, occupy the entire screen. This happens if there is no container element in the page layout. I believe that you should not suggest users to work with such pages. Let me explain this thought.

On the need to use containers for web page content


Using a container for web page content has many strengths that designers and developers should be aware of. Here are some of these strengths:

  1. Using a container improves readability of page content. Without a container, content like text can stretch to the full width of the screen. On small screens, this can give an acceptable result. But on large screens it looks very bad.
  2. Grouping page design elements makes it easy to adjust the distance between them.
  3. If you need to group design elements in columns, it will be difficult to do without using a container.

Customizing the container element using CSS


Now that we’ve talked about the basics of using containers, and what are the benefits of using them, let's dwell on how to customize them using CSS.

▍Setting the width of the container


ITKarma picture

Custom width container element

When creating a container, the first thing to decide is how wide it will be. You can answer the question about the desired width of the container by analyzing the page design. In general, we can say that containers with a width within the limits of CDMY3CDMY - CDMY4CDMY are most often used. For example, the popular Bootstrap framework uses a width equal to CDMY5CDMY.

.wrapper {     width: 1170px; } 

This shows how to set the width of an element with class CDMY6CDMY in CDMY7CDMY, but, in fact, the CDMY8CDMY property for setting the width of containers is not recommended. The fact is that this leads to the need for horizontal page scrolling if the width of the area of ​​the browser window available for displaying the page is less than CDMY9CDMY. You can solve this problem using the CDMY10CDMY property:

.wrapper {     width: 1170px;     max-width: 100%; } 

Although this is a completely working trick, you can completely get rid of the CDMY11CDMY property and, as in the following example, use only the CDMY12CDMY property:

.wrapper {     max-width: 1170px; } 

Now that we have found a suitable mechanism for adjusting the width of the container, let's talk about how to align the container to the center of the page.

▍Centering the container to the center of the page


ITKarma picture

The container is centered on the page

In order to align the container to the center of the page, you need to use the CDMY13CDMY value for left and right indents when setting its outer indents:

.wrapper {     max-width: 1170px;     margin: 0 auto; } 

Here's how, in accordance with the CSS specification, indents behave that are assigned the value CDMY14CDMY:

If margin-left and margin-right are set to auto, then the values ​​that will be used for these indents will be the same. This allows you to center the element horizontally relative to the edges of the block containing it.

If you are interested in details about using the CDMY15CDMY keyword in CSS, take a look at this my article.

I used the design of CDMY16CDMY here. It resets the size of the upper and lower indents to 0, and adjusts the left and right indents in accordance with the application of the keyword CDMY17CDMY. This step has some consequences, which I will discuss below. In the meantime, I want to note that it is recommended to use the full version of the shortened construction described above to configure external indents:
.wrapper {     max-width: 1170px;     margin-left: auto;     margin-right: auto; } 

▍Setting left and right indentation


ITKarma picture

Horizontal (left and right) indentation

When designing a container, it is important to pay attention to setting its left and right inner indents. When the size of the viewport is less than the maximum width of the container, this will cause the edges of the container to be pressed against the borders of the viewport. Here's an example of styling a container that has padding:

.wrapper {     max-width: 1170px;     margin-left: auto;     margin-right: auto;     padding-left: 16px;     padding-right: 16px; } 

By adjusting the inner margins of the container, we can be sure that the edges of the container, in any case, will be at least CDMY18CDMY from the edges of the viewing area, even if the width of the viewing area is less than the maximum width of the container. Indentation is a kind of protective mechanism that prevents the borders of the container from pressing against the borders of the viewport even when the viewport is narrower than the maximum width of the container.

▍Use of percentages when setting up containers


After the publication of the original version of this material, they wrote to me about the use of percentages when setting up containers. In particular, we are talking about applying the CSS property CDMY19CDMY instead of using the properties CDMY20CDMY and CDMY21CDMY.

ITKarma picture

Using percentages when setting up containers and when max-width: 90% results in acceptable and unacceptable results

Although this approach turned out to be quite working, it turned out that on large screens 90% of the width of the viewing area is too much. But this problem can be solved using the media query:

.wrapper {     max-width: 90%;     margin-left: auto;     margin-right: auto; }/* Медиа-запрос для больших экранов */@media (min-width: 1170px) {     .wrapper {         max-width: 1170px;     } } 

As a result, it turns out that using a percentage value, we complicate the CSS code. In order to rid ourselves of the need to use a media query, we can use a fixed value for the width. Another solution suggested in
this tweet is to use a combination of the CDMY22CDMY and CDMY23CDMY properties:

.wrapper {    width: 90%;    max-width: 1170px;    margin-left: auto;    margin-right: auto; } 

This is an interesting approach, but I would prefer to adjust the indentation myself, without relying on percentage values.

▍ Display property of the container element


Since the tags CDMY24CDMY are used to design containers, containers, by default, are block elements. What if I need to change the property of the CDMY25CDMY container to CDMY26CDMY, in order to place its children in the grid?

I do not recommend doing this, as this goes against the idea of ​​separation of responsibilities. A container element, a “wrapper”, is an entity whose purpose is to “wrap” other elements. If you want to place the child elements of the container in the grid, then it’s worth adding another CDMY27CDMY to the container, which includes other elements whose property CDMY28CDMY is set to CDMY29CDMY. It will be easier and cleaner than setting up the grid with the main container. This approach, moreover, allows us to say that in the future the project in which it is used will be easier to support.

Let there be such a container:

<div class="wrapper">     <!-- Содержимое --> </div> 

Setting the CDMY30CDMY property of such an item is not recommended because the item can be used on different pages. Its special settings can accidentally lead to a violation of the placement of elements. Here's the bad setup option for the container in question:

.wrapper {     display: grid;     grid-template-columns: 2fr 1fr;     grid-gap: 16px; } 

Better to use the following HTML:

<div class="wrapper">     <div class="featured-news">         <!-- Элементы, которые нужно разместить в сетке  -->     </div> </div> 

An element with class CDMY31CDMY can be styled like this:

.featured-news {     display: grid;     grid-template-columns: 2fr 1fr;     grid-gap: 16px; } 

Notice that in this example, we used a separate element, CDMY32CDMY, as another wrapper for the content of the page. You can ignore the names of the classes used here. To solve this problem, you can choose more successful class names that are suitable for repeated use on various pages of the site. However, naming CSS entities is beyond the scope of this article.

▍Setting indentation separating container elements


Remember how I didn’t recommend using the shorthand way of adjusting the outer margins to center the container element? It was about such a design:

.wrapper {      margin: 0 auto; } 

Although this is a completely working style, if there are several wrapper elements on the page and there should be some distance between them, using this style can lead to confusion. If, for some reason, you decide to clarify the stylization of the wrapper element by using an additional class, then setting the outer indentation using this class will not give the desired results due to the peculiarities of calculating the specificity values ​​of CSS rules.

I mean the following stylization scheme:

.wrapper-variation {     margin-top: 50px; } 

The CDMY33CDMY property for an element with class CDMY34CDMY will not be applied to the element because the CDMY35CDMY property overrides it. A short form of setting a property redefines its full form. In order to avoid this, it is recommended in such cases to use the full form of recording properties. That is, when styling an element with class CDMY36CDMY, you need to do this:

.wrapper {      max-width: 1170px;     margin-left: auto;     margin-right: auto;     padding-left: 16px;     padding-right: 16px; } 

Now let's talk about adjusting the outer margins of elements. When working on each of my projects, I prepare a set of helper classes for setting internal and external margins. I use them where they are needed. Take a look at the following figure.

ITKarma picture

Stand-alone container and container inside CDMY37CDMY element

Here is the HTML:

<div class="wrapper mb-5"></div> <section>     <div class="wrapper"></div> </section> <div class="wrapper"></div> 

Here is the style:

.mb-5 {     margin-bottom: 3rem !important; } 

With this approach, the CSS code for the wrapper element remains unchanged, and the distances between the elements are adjusted using auxiliary CSS classes. Here you may have a question about why I needed to use several containers on the page, when you can do one. Please note that in the above HTML code there is an element CDMY38CDMY located between two wrapper elements.

Here, the use of the modifier CDMY39CDMY shows itself well. The fact is that the meaning of using auxiliary classes is to force change of property values. This behavior can be achieved using CDMY40CDMY.

The container inside the full-screen element


In some cases, it happens that there is an element CDMY41CDMY with a background that occupies 100% of the width of the viewing area, and inside this element there is a container element. This scheme is similar to the one we examined in the previous section.

The HTML structure of the page in this situation may look like this:

<section>     <div class="wrapper"></div> </section> <section>     <div class="wrapper"></div> </section> 

The CDMY42CDMY element occupies 100% of the width of the viewport. You can assign a background image or background color to this element. The container inside this element prevents the content from occupying the entire width of the viewport.

ITKarma picture

The CDMY43CDMY element occupies the entire width of the viewport, the container limits the space in which the contents of the page are displayed

In this figure, the CDMY44CDMY element has a background image. It occupies the entire width of the viewport, and the page content displayed in the container is limited by the width of the container.

Do I need to wrap the contents of the top block of the page in a container?


Do I need a container to design the top block of the page, which is often called the "Hero Section"? It depends on each specific situation. Exploring the two most common approaches to page layout.

The first approach is to center the content of the block and limit the width of the content.

ITKarma picture

The content width of the top page block is limited to

The second option involves distributing content within the top block.

ITKarma picture

Content is distributed within the top block of the page

In order to better understand these patterns, I suggest exploring the features of their internal structure.

The top block of the page, the contents of which are centered in the


While developing the top page block, you might want to place some content in the corresponding CDMY45CDMY element and center it without using the container element.

<section class="hero">     <h2><font color="#3AC1EF">How to make bread at home</font></h2>     <p>....</p>     <p><a href="/sign-up">Sign up</a></p> </section> 

When styling the above HTML code, you can center its content in the center using the CDMY46CDMY property:

.hero { text-align: center; } 

With this approach, everything will look decent until the width of the browser window changes. Here is a discussion of the problems this might cause.

▍ Problem number 1: the contents of the section are pressed to the edges of the viewport


Since the right and left indents are not configured in this example, the contents of the section will be placed close to the borders of this section. This creates inconvenience for users, as it will be more difficult for them to read the contents of the top block of the page.

ITKarma picture

The contents of the section are pressed to its edges

▍ Problem number 2: lines of text on oversized screens are too long


On large screens, text formatted with the CDMY47CDMY tag can be very difficult to read because the paragraph will be too long. According to this document, the recommended number of characters per line is 45-75. Exceeding the string length beyond this range makes reading difficult.

ITKarma picture

String length is too long

▍Troubleshooting


To solve the above problems, you can use a container. It will allow you to keep the string length within reasonable limits, and prevent the content from snugly fitting to the section boundaries.

<section class="hero">     <div class="hero__wrapper">             <h2><font color="#3AC1EF">How to make bread at home</font></h2>             <p>...</p>             <p><a href="/sign-up">Sign up</a></p>     </div> </section> 

Here, when setting up the container, I use the class name CDMY48CDMY, since this container, quite possibly, will be unique and will only be used to decorate the top block of the page. Therefore, in particular, the width of the container may be less than the width of the containers used under normal conditions.

.hero__wrapper {     max-width: 720px;     margin-left: auto;     margin-right: auto;     padding-left: 16px;     padding-right: 16px; } 

You can center the contents of the top block of the page using any convenient approach. It all depends on each specific situation. In this example, to align content, simply use the CDMY49CDMY property.

How to align the container: in the center, or on the left edge of the page?


I cannot give an unambiguous answer to this question, but I saw sites whose containers used on them are aligned in the center on laptop screens and on the left side of the page on desktop screens.

An example of such a site is Techcrunch. Please note that on the desktop computer screen the content of the site is aligned to the left edge of the page.

ITKarma picture

Aligning contents on a laptop screen and on a desktop computer screen

I like to work with sites whose contents are centered. On the pages of such sites there are symmetrical indents left and right. But the fact that the contents of some sites are aligned to the left edge of the page may have some reason that I do not know about. If you know why this is so, let let me know .

Using CSS variables to create various container styling options


It rarely happens that all container elements used in a project have the same width. The width of the container may vary depending on the contents of the container and how it is used.The use of CSS variables provides greater flexibility in working with containers. This, in addition, is a very modern approach to configuring containers. Consider an example.

Here is the HTML code for the container:

<div class="wrapper"></div> 

Here is the style:

.wrapper {     max-width: var(--wrapper-width, 1170px);     margin-left: auto;     margin-right: auto;     padding-left: 16px;     padding-right: 16px; } 

If you carefully read the CSS code, you might notice that two values ​​are passed to CDMY50CDMY: the first is the CDMY51CDMY variable, the second is the usual CDMY52CDMY value. The second value is a spare. The meaning of its existence is that it will be used if the value of the variable CDMY53CDMY is not set.

What does it mean? And this means that we have in our hands a tool for creating various variants of wrapper elements due to the possibility of redefining the value of the CDMY54CDMY variable. It looks like this:

<div class="wrapper" style="--wrapper-width: 720px"></div> 

Thanks to this approach, I was able to create a special container without resorting to the following actions:

  • Adding a new class to an element.
  • Copy and duplicate existing styles.

Such an element will be easier to maintain in the future. And besides, it’s easier to configure using the browser developer tools.

If you don’t like this approach because it uses the inline style to override the value of the CSS variable, you can quite solve this problem by adding a new class to the element. For example, as shown below.

Here is the HTML markup:

<div class="wrapper wrapper--small"></div> 

This is how the style looks:

.wrapper--small {     --wrapper-width: 720px;     /* благодаря этому стандартная ширина контейнера будет переопределена. */} 

Here you can find a working example.

Using display: contents


To begin, let me talk a little about the value of CDMY55CDMY property CDMY56CDMY. Every element in CSS is a block. This block contains something; it has inner and outer margins and a border. Using the CDMY57CDMY property causes the block to which it is assigned to be removed from the document stream. This can be thought of as removing the opening and closing tag tags.

Here is the markup:

<header class="site-header">     <div class="wrapper site-header__wrapper">             <!-- Содержимое заголовочной области сайта -->     </div> </header> 

Here is the style:

.site-header__wrapper {     display: flex;     flex-wrap: wrap;     justify-content: space-between; } 

ITKarma picture

Wrapping element

When implementing something resembling this example, you may need to make sure that the header section of the site can stretch to the full width of the page so that its width is not limited by the properties of the container.

.site-header__wrapper {     display: contents; } .site-header {     display: flex;     flex-wrap: wrap;     justify-content: space-between; } 

Here, due to the use of the CDMY58CDMY property, the wrapper element will be “hidden”. Now that the CDMY59CDMY property is applied to an element with class CDMY60CDMY, the children of the container become the children of CDMY61CDMY.

ITKarma picture

The header of the site takes, in width, all the available space

Responsive background and fixed content


The CSS Secrets book introduces an interesting technique that can be used to style sections that have a responsive background (a background that can occupy the entire available width of the viewport) and a container element for content. Consider the usual way to create layouts for such partitions.

Here is the HTML markup:

<section>     <div class="wrapper"></div> </section> 

Here are the styles:

section {     background-color: #ccc; } .wrapper {     max-width: 1170px;     margin-left: auto;     margin-right: auto;     padding-left: 16px;     padding-right: 16px; } 

Here, the values ​​of the CDMY62CDMY and CDMY63CDMY properties are calculated by taking half the width of the viewport and subtracting the width of the content from it. The same can be achieved using indentation.

ITKarma picture

Indentation

section {   padding: 1rem calc(50% - 585px); } 

But the deal has not yet been done. On mobile devices, the content will be pushed to the edges of the viewing area. You can solve this problem, for example, like this:

section {   padding: 1rem; } @media (min-width: 1170px) {     section {       padding: 1rem calc(50% - 585px);     } } 

An alternative solution is to use the new CSS function CDMY64CDMY. Using it, we set the minimum size of the inner indent equal to CDMY65CDMY, and as the second value passed to it, specify the expression CDMY66CDMY.

section {   padding: 1rem max(1rem, (50% - 585px)); } 

If you are interested in details about the CSS functions CDMY67CDMY, CDMY68CDMY and CDMY69CDMY - here my material on this topic.

How do you style container elements?

ITKarma picture.

Source