Designing Web Layouts with CSS and Flexbox/

...

/

Challenges with Traditional Layouting

Challenges with Traditional Layouting

We will revisit the three column layout with inline-block display mode to understand why traditional layouting is not intuitive.

We'll cover the following...

Whitespaces take space

Let’s recall the previous exercise, but this time, let’s also add a proper height to the elements, and let’s create six divs instead of three:

<div class="container"><!--
    --><div class="col">First</div><!--
    --><div class="col">Second</div><!--
    --><div class="col">Third</div><!--
    --><div class="col">Fourth</div><!--
    --><div class="col">Fifth</div><!--
    --><div class="col">Sixth</div><!--
--></div>
.container { 
  margin: 50px; 
  padding: 0; 
}
.col { 
  display: inline-block; 
  border: 2px solid black; 
  width: 33.33%; 
  box-sizing: border-box; 
  margin: 0 auto; 
  height: 100px; 
  background-color: lightblue;
}

The six elements are rendered as follows:

...