Responsive containers and fluid layout

Imagine you are building a temple in Ancient Egypt. The temple walls must accommodate all hieroglyphs and sculptures, regardless of whether the hall is narrow or spacious. In CSS, it works similarly - a container must adapt to the available space.

Fixed vs fluid layout

Traditionally, pages were built with fixed widths in pixels. The problem? On a small phone, the content went beyond the screen, and on a huge monitor, it occupied only a narrow strip.

1/* Fixed layout - BAD approach */
2.container {
3  width: 960px; /* Always 960px, regardless of the screen */
4}

The solution is a fluid layout - we use percentage units instead of pixels:

1/* Fluid layout - GOOD approach */
2.container {
3  width: 100%; /* Takes up the full available width */
4}

Responsive container pattern

A key pattern in responsive CSS is the responsive container. It combines three properties:

1.container {
2  width: 100%;         /* Full width on small screens */
3  max-width: 1200px;   /* Limit on large screens */
4  margin: 0 auto;      /* Center on the page */
5}

How does it work?

• On a phone (320px wide) - the container is 320px (100% of the screen)
• On a tablet (768px) - the container is 768px (100% of the screen)
• On a laptop (1366px) - the container is 1200px (max-width) and is centered
• On a large monitor (1920px) - the container is still 1200px, centered with margins on both sides

It's like a corridor in a pyramid - content is never too wide, but in narrow passages it uses all available space.

box-sizing: border-box

One of the most important CSS declarations for responsive design:

1*, *::before, *::after {
2  box-sizing: border-box;
3}

Without border-box, padding and border add to the width of the element:

1/* Without border-box */
2.box {
3  width: 100%;
4  padding: 20px;
5  /* Actual width: 100% + 40px padding = OVERFLOWS THE SCREEN! */
6}
7
8/* With border-box */
9.box {
10  box-sizing: border-box;
11  width: 100%;
12  padding: 20px;
13  /* Actual width: 100% (padding is INSIDE) */
14}

This is a fundamental rule - without border-box, an element with width: 100% and padding will be wider than the screen!

Practical example: Content section

Let's see how to build a responsive page section without using Flexbox or Grid:

1<section class="features">
2  <div class="container">
3    <h2>About Ancient Egypt</h2>
4    <p>Egyptian civilization lasted over 3000 years...</p>
5  </div>
6</section>

1* {
2  box-sizing: border-box;
3}
4
5.features {
6  width: 100%;           /* Section at full width */
7  padding: 40px 20px;    /* Inner spacing */
8  background-color: #F4E4C1;
9}
10
11.container {
12  width: 100%;
13  max-width: 1200px;
14  margin: 0 auto;       /* Centering */
15  padding: 0 20px;      /* Side padding - content doesn't stick to edges */
16}

Multiple containers on a page

The power of the container pattern is that you can use it multiple times:

1<header class="hero">
2  <div class="container">
3    <h1>Great Pyramid of Giza</h1>
4  </div>
5</header>
6
7<section class="about">
8  <div class="container">
9    <p>Information about the pyramid...</p>
10  </div>
11</section>
12
13<footer class="footer">
14  <div class="container">
15    <p>Page footer</p>
16  </div>
17</footer>

Each section can have a different background color at 100% width, but the content inside is always constrained by the container. If a designer changes the layout from 1200px to 1440px - you change one value of max-width in the .container class.

Padding as safe space

On mobile devices, content should not stick to the very edge of the screen. That's why we add padding:

1.container {
2  width: 100%;
3  max-width: 1200px;
4  margin: 0 auto;
5  padding-left: 16px;   /* Safe space on the left */
6  padding-right: 16px;  /* Safe space on the right */
7}

On larger screens (tablets), you can increase this padding using media queries:

1@media (min-width: 768px) {
2  .container {
3    padding-left: 32px;
4    padding-right: 32px;
5  }
6}

Summary

A responsive container is the foundation of every website:

• width: 100% - adapts to small screens
• max-width - limits on large screens
• margin: 0 auto - centering
• box-sizing: border-box - padding doesn't enlarge the element
• padding - safe space from edges

Try this pattern in the editor below:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Responsive containers - Fluid Layout</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <header class="hero">
11        <div class="container">
12            <h1>Pyramid of Cheops</h1>
13            <p>Discover the secrets of responsive containers</p>
14        </div>
15    </header>
16
17    <section class="about">
18        <div class="container">
19            <h2>A container with max-width</h2>
20            <p>This container has <code>width: 100%</code> and <code>max-width: 1200px</code>. On small screens it takes up the full width, on large ones it is limited to 1200px and centered.</p>
21            <p>Change the browser window size to see how the container behaves!</p>
22        </div>
23    </section>
24
25    <section class="comparison">
26        <div class="container">
27            <h2>Fixed vs Fluid Layout</h2>
28
29            <div class="box fixed-box">
30                <h3>Fixed</h3>
31                <p>width: 960px - does not adjust to the screen</p>
32            </div>
33
34            <div class="box fluid-box">
35                <h3>Fluid</h3>
36                <p>width: 100% + max-width: 800px - adjusts!</p>
37            </div>
38        </div>
39    </section>
40
41    <section class="box-sizing-demo">
42        <div class="container">
43            <h2>box-sizing: border-box</h2>
44
45            <div class="box without-border-box">
46                <h3>Without border-box</h3>
47                <p>width: 100% + padding: 30px = sticks out of the container!</p>
48            </div>
49
50            <div class="box with-border-box">
51                <h3>With border-box</h3>
52                <p>width: 100% + padding: 30px = fits perfectly!</p>
53            </div>
54        </div>
55    </section>
56
57    <footer class="footer">
58        <div class="container">
59            <p>Page footer - same container as above</p>
60        </div>
61    </footer>
62</body>
63</html>