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

Learn more

CSS Float Property

Edited: 2011-04-25 00:13

The CSS float property, is used to float an element towards the left or right.

Floated elements automatically becomes blocks, so you do not need to declare them as blocks using the CSS display property.

The float property is commonly used to create multi-column layouts, but absolute positioning can also be used.

Sometimes you may want to have elements placed below some floated elements, in which case you need to clear the floats first. Either using an anonymous div, or on the elements themselves.

Possible Values

  1. left
  2. right
  3. none - (Default)

CSS Float Example

#LeftContent {
 float: left;
 min-height: 200px;
 width: 50%;
}
#RightContent {
 float: right;
 min-height: 200px;
 width: 49%;
}
#Footer {
  min-height: 100px;
  clear: both;
}

Inherited? - NO!