Float Property

Float Property

The float property is used to "float" an element out of normal flow. In the past, this property was commonly used to create two-column and three-column layouts (there are better approaches today).

Clear Property

This property is used to "clear" a float. Note that the overflow property also clears a float.

Two-Column Demo

The following CSS creates a two-column layout. The left column is 100px wide, while the right column has a left margin of 125px.

CSS

#leftcolumn {
    float: left;
    width: 100px;
    background-color: black;color: white;
}

#rightcolumn {
    margin-left: 125px;
    background-color: yellow;
    color: black;
}

.clearall {
    clear: both;
}

HTML


<div id="leftcolumn">
    Content
</div>

<div id="rightcolumn">
    Content
</div>

<div class="clearall">
This is the left column.
This is the right column.

Three-Column Demo

One issue that commonly occurs with a two or three-column design is unequal column heights. This can be addressed by setting a height for each column. In the three-column design below, notice that the left and right columns are coded before the center column. The width of the center column will vary based on screen width.

CSS

leftcolumn {
    float: left;
    width: 10%;
    height: 500px;
    background-color: black;
    color: white;
}

#rightcolumn {
    float: right;
    width: 10%;
    height: 500px;
    background-color: yellow;
    color: black;
}

#centercolumn {
    background-color: red;
    color: white;
    height: 500px;
}

.clearall {
    clear: both;    
}

HTML

<div id="leftcolumn">
    Content
</div>

<div id="rightcolumn">
    Content
</div>

<div id="centercolumn">
    Content
</div>

<div class="clearall"></div>
This is the left column.
This is the right column.
This is the center column.

Note: These are NOT responsive.