21. Floats as columns

In addition to the obvious use for images, floats can be used to produce column layouts.

Example code:

<style> 
    .sidebar { width:5em; height: 100%; border:3px dashed red; } 
    .left { float: left; } 
    .right { float: right; } 
</style> 
 
<div class='left sidebar'> Floating left sidebar L1. </div> 
<div class='left sidebar'> Floating left sidebar L2. </div> 
<div class='right sidebar'> Floating right sidebar R1. </div> 
 
<div style='background: lime;'> 
    The non-floating main box covers the full width, 
    but its contents don't overlap the floating sidebars. 
</div>