By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

CSS Float Based Layouts

Learn how to use the float property of CSS with this tutorial.

Edited: 2011-03-16 02:35

This Tutorial includes the best techniques using float to create multi-column layouts, as well as single column layouts. The CSS float property, along with relative positioning is widely used when creating layouts.

No hacks, JavaScript, or negative margins where used, unless otherwise written.

Float Based Layouts

The following is a collection of Tutorials, Articles, and even Complete Techniques showing how to use float in layouts.


Brugbart Examples

  1. Float Based 3-column Layout
  2. TC+BC Equal Height Column Layout

TC=TopContent BC=BottomContent