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:
...
Ask