Search⌘ K
Home
Courses
Designing Web Layouts with CSS and Flexbox

Challenges with Traditional Layouting

Explore the common problems faced in traditional web layouts such as space taken by whitespace and content overflow with inline-block elements. Learn how font size and vertical alignment affect layout stability, and understand the limitations when content exceeds container height.

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:

...