The Process of Layouting

Before Flexbox became mainstream, we mainly used block, inline, and inline-block display modes to create page layouts. Though they are not always intuitive, it is still worth learning them, because they form the foundations for layouting.

display: block

A block-level element occupies the whole width of a row inside its container.

The width of a block-level element can be set. However, if the width of the block-level element is smaller than the width of its container, then the rest of the space is reserved for the block level element.

Example:

Block-level element.

.box {
  display: block;
  box-sizing: border-box;
  width: 300px;
  padding: 30px;
  border: 5px;
}

To center the block, including its border and padding, we can set an auto left and right margin.

.box {
  display: block;
  box-sizing: border-box;
  width: 300px;
  padding: 30px;
  border: 5px;
  margin: 16px auto;
}

In the margin: 16px auto; rule, the first value is the top and bottom margin, while the second value is the left and the right margin. An auto margin equally divides the available space symbolized by orange.

Centered block-level element.

Block-level elements are blocks in a document. Typical block-level elements are p, div, ul, ol, article, section, main, h1, h2, h3, h4, h5, h6.

display: inline

Inline elements occupy the minimum width and height that is absolutely necessary to display their contents.

The width and the height of an inline element cannot be set. We have no control over the dimensions of an inline element.

To align an inline element, we have to enclose it in a block-level element and align the block-level element.

In other words, inline elements behave just like words in free text.

Typical inline elements are: links, strong and emphasized content, images.

Suppose the following HTML content is given:

<p> 
  <strong>First</strong> 
  <em>Second</em> 
  <a href="#">Third</a>
</p>

The content is displayed as follows:

First Second Third

display: inline-block

Inline-block takes the best of both worlds. Inline-block elements can be positioned next to each other, just as if they were inline elements. As an added bonus, we can also set their width and height.

Therefore, when we create a three-column layout, we typically use inline-block elements with a fixed height.

The HTML looks a bit weird. We will save the explanation for later. Just accept that <!-- and --> are comments, commenting out the whitespace characters, space, and enter, between two adjacent divs and between the container and the first or last corresponding div.

<div class="container"><!--
    --><div class="col">First</div><!--
    --><div class="col">Second</div><!--
    --><div class="col">Third</div><!--
--></div>

The CSS looks as follows:

.container { 
  margin: 0; 
  padding: 0; 
}

.col { 
  display: inline-block; 
  border: 2px solid black; 
  width: 33%; 
  box-sizing: border-box; 
  margin: 20px auto;
}

The result looks as follows:

Centered block-level element.

As foreshadowing, we can already see that it is not the most intuitive thing in the world to create a three-column layout. Just try removing the HTML comments and see what happens. How would we expect a beginner to understand that they need to write comments here? How would we expect a beginner to know that they have to use border-box box-sizing to avoid having to factor in the border width and the padding width? This is one reason why using inline-block display mode is not intuitive enough to create a layout with multiple columns.

Examine the three-column layout below. Try to play around with the code to see what happens if you make the following changes:

1. Remove the box-sizing: border-box; rule,
2. Remove the comments,
3. Add contents that span multiple rows.