Floats
In which we discuss four ways that elements can be floated: simple, margin under float, opposing, and same side.
'Simple' float
.floater {
margin-right: 10px;
float: left;
background-color: #CEE14B;
width: 100px;
height: 100px;
}
This is an example of 'simple float': a single element is floated to the left and following text — even in a separate block box, such as this one (a
div — wraps around its right-hand edge, falling to the
left-hand edge only when the float is 'cleared', either implicitly or explicitly.When two columns are required, floats can be used in one of two ways:
'Margin under' float
div {
margin-left: 110px;
}
The 'margin under float' technique ensures
the non-floated element has a large enough margin to accommodate whatever is
floating. In this example, the floating box is 100px wide, with a 10px right
margin. Setting the div's left margin to 110px pushes it right into its
own, distinct column.
'Opposing' floats
Alternatively, opposing floats can be used
'Same side' float
The final float type to discuss is one I like to call 'same side', because I've spent about 10 seconds thinking up a name. The result is similar to that of many graphical file managers when displaying icons:
A series of fixed-dimension boxes, all floated to the left, within a container, adapts to that container's layout.
div {
width: 50px;
height: 50px;
float: left;
margin: 10px;
background-color: #FCAF3E;
}
Tweet
