knowledge-kitchen

CSS - Web Page Layout

laying out the content of a web page

  1. Overview
  2. Container Elements
  3. Calculating Widths
  4. Block vs. Inline Elements
  5. A Word About Divs and Spans
  6. Position
  7. Grid
  8. Flexbox
  9. Conclusions

Overview

The layout of a web page is controlled by a few simple CSS concepts and rules. In order to get it right, we need to understand a few preliminary concepts.

Containers

The HTML

To center the contents of a web page and to restrict the width of the page, we wrap the entire contents of the paage within a container or wrapper element.

...
<body>
  <div class="container">
    <!-- put the contents of your page within this element -->
  </div>
</body>
...

Restrict the page width

Now, we can easily restrict the page width to whatever width we like by adjusting this container’s width.

.container {
  width: 800px; /* you choose the width */
}

Center the contents

We can also easily center the entire page within the browser’s viewport using margins.

.container {
  width: 800px; /* container width must be smaller than the browser viewport width */
  /* equal margins on the left and right side of the containere */
  margin-left: auto;
  margin-right: auto;
}

Warning: avoid setting heights

The height of the container, or any element for that matter, will always automatically adjust to fit the height of the contents you put within it.

If you were to set the height of an element to a fixed size, yet place more content nested within that element than can fit in that size, your layout would become corrupted.

Calculating Widths

The question

The width of an element can be a bit counter-intuitive to calculate.

Take this HTML:

<article class="boxy">...</article>

And this CSS:

.boxy {
  width: 400px;
  border: 1px solid red;
  padding: 20px;
  margin: 10px;
  background-color: pink;
}

What’s the width of the article element?

An answer

The actual width of an element includes:

actual width = width +
               left border + right border +
               left padding + right padding

Another answer

The space consumed by an element also includes:

actual width =  width +
                left border + right border +
                left padding + right padding +
                left margin + right margin

Block vs. Inline Elements

Concept

Layout behavior of HTML elements is largely determined by the value of their CSS display property. Let’s focus first on 3 of these:

…

display: block;

display: inline;

display: none;

…

Wwe will discuss two more important display values, grid and flex, later.

Common block elements

By default, the display property is set to block for many elements, including:

Block element behavior

The display: block setting causes the elements to have the following behavior:

Common inline elements

By default, the display property is set to inline for many text-related elements and images, including:

Inline element behavior

The inline value will cause the elements to have the following behavior:

Effects

The block/inline difference means that…

A Word About Divs and Spans

Concept

There are two elements we will frequently use that have no semantic meaning:

These are useful when you want to surround some content that you want to apply a style to, but you don’t want to adjust that content’s semantic meaning.

Position

Positioning using the CSS position property

It is sometimes tempting to use the CSS position property to position elements on the page… it sounds like this is what the property is intended for.

The CSS position property can take three values:

Do not use these for general web page layout.

These position values are useful in some specific advanced contexts, but should never be used to layout the positions of all the main parts of a web page.

You have now been warned. Don’t use them.

CSS Grid

The skeleton of web layout

The CSS Grid system is typically used to create the main skeletal structure of web pages. This involves the following:

  1. put a container element around the content you want to lay out
  2. set the container element to have a display value of grid
  3. set the container element to have a grid-template-columns value that defines the number of columns in the grid
  4. set the container element to have a grid-template-areas value that defines the areas of the grid and their relative widths

Example - Cheerio Layout

Imagine the following classic web page layout with a header, footer, main content, left navigation bar and “right-rail” sidebar:

CSS Cheerio Layout

Example - Cheerio Layout (HTML)

The body section of the HTML for such a page might contain code like this:

<div class="container">
  <header>Header</header>
  <nav>Left nav</nav>
  <main>Main content</main>
  <aside>Right rail</aside>
  <footer>Footer</footer>
</div>

Example - Cheerio Layout (CSS)

The critical parts of the CSS code that would produce such a layout would be:

/* give grid system nicknames for each of the areas we want to lay out */
header { grid-area: header; }
nav { grid-area: left-nav; }
main { grid-area: main-content; }
aside { grid-area: right-rail; }
footer { grid-area: footer; }

.container {
  display: grid; /* turn on the grid system */
  grid-template-columns: 1fr 2fr 1fr; /* relative widths of columns */

  /* now specify which nicknamed elements to put into which grid positions */
  grid-template-areas:
    "header     header        header"
    "left-nav   main-content  right-rail"
    "footer     footer        footer";
}

CSS Flexbox

Flexible layouts of components

While CSS Grid is most commonly used to create the outer structures of a web page, CSS Flexbox is often useful for laying out the inner content pieces that go within each skeletal area.

To use CSS Flex, we typically:

  1. put a container element around the content you want to lay out
  2. set the container element to have a display value of flex to turn on CSS Flex for that element.
  3. set the container’s flex-direction property to be either row or column, depending on whether you want to line up the inner elements horizontally or vertically.
  4. set the container’s gap property to be the desired spacing between the inner elements.
  5. determine how the inner elements are justified within the container by setting the container’s justify-content property.

Example - Content row

For example, consider an area containing three elements that sit side-by-side, where one element is wider than the others, and all elements are separated from each other by a gap.

CSS Flexbox row

Example - Content row (HTML)

The HTML code for such a content area might be:

<div class="row">
  <div class="box1">box 1</div>
  <div class="box2">box 2</div>
  <div class="box3">box 3</div>
</div>

Example - Content row (CSS)

The critical parts of the CSS code that would produce such a layout would be:

.row {
  display: flex;
  flex-direction: row; /* options are row | row-reverse | column | column-reverse; */
  gap: 1rem; /* gap between items, set to 1 times the font size of the root element (the html element), which by default is 16px in most browsers */
}

/* the following settings allow the three boxes to grow, where box 2 will grow up to 10 times as wide as box 1 and 2 */
.box1, .box3 { flex-grow: 1; }
.box2 { flex-grow: 10; }

Conclusions

At this point you have a solid understanding of the key concepts behind web page layout. You must try it yourself to really understand how to apply it.