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: