CSS Sizing Example #1

This demo uses absolute and relative positioning for layout. That isn't very flexible. Try making the window smaller - you will see the layout doesn't handle size changes very well.

The next example uses a CSS flexbox for flexible layout leading to a fluid design.
         
widths: 10px, 20px, 50px, 100px, 150px
         
widths: 1em, 2em, 5em, 10em, 20.5em
           
widths: 1%, 2%, 5%, 10%, 20%, 40%
Mn Mn Mn Mn Mn Mn Mn Mn Mn
font-size: xx-small, x-small, smaller, small, medium, large, larger, x-large, xx-large
Mn Mn Mn Mn Mn Mn Mn Mn Mn
font-size: 0.5em, 1em, 1.5em, 2em, 2.5em, 3em, 3.5em, 4em, 4.5em