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 <div>
element to float: left
, which results in the rest of the content wrapping around it.
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.
Float Right Example
In this example, we set a <div>
element to float: right
, which results in the rest of the content wrapping around it.
In this case, I keep the bottom margin, but I move the right margin to the left of the box instead.
Aligning Boxes Side by Side
Here we use float: left
to align <div>
elements side by side. Normally these elements would stack up on top of each other, but by using float: left
, we can get them to display next to each other.