CSS Float
You can "float" an element to the right or left so that other content flows around it.
The CSS float property enables you to determine where to position an element relative to the other elements on the page. When you use the float property, other elements will simply wrap around the element you applied the float to.
Float Left Example
In this example, we set a
Note that I apply a margin to the right and bottom of the box, so that the rest of the content doesn't run right up against the box.
Run
Stack editor
Unstack editor
Example.float-left {
float: left;
padding: 20px;
margin: 0 10px 10px 0;
background: gold;
}
Float left
This text rearranges itself to flow around the element that is floated left.
I added a margin to the right and bottom of the floated box so that this text doesn't run right up against it. Play around with the property values to see how it changes the layout.
Float Right Example
In this example, we set a
In this case, I keep the bottom margin, but I move the right margin to the left of the box instead.
Run
Stack editor
Unstack editor
Example.float-right {
float: right;
padding: 20px;
margin: 0 0 10px 10px;
background: gold;
}
Float right
This text rearranges itself to flow around the element that is floated right.
I added a margin to the left and bottom of the floated box so that this text doesn't run right up against it. Play around with the property values to see how it changes the layout.
Aligning Boxes Side by Side
Here we use float: left to align
Run
Stack editor
Unstack editor
Examplediv {
float: left;
padding: 20px;
}
.gold {
background: gold;
}
.limegreen {
background: limegreen;
}
.orange {
background: orange;
}
Gold
Limegreen
Orange