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;
...