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.

<!DOCTYPE html>
<title>Example</title>
<style>
  .float-left {
    float: left;
    padding: 20px;
    margin: 0 10px 10px 0;
    background: gold;
  }
</style>

<div class="float-left">
  Float left
</div>
<p>This text rearranges itself to flow around the element that is floated left. </p>
<p>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.</p>

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.

<!DOCTYPE html>
<title>Example</title>
<style>
  .float-right {
    float: right;
    padding: 20px;
    margin: 0 0 10px 10px;
    background: gold;
  }
</style>

<div class="float-right">
  Float right
</div>
<p>This text rearranges itself to flow around the element that is floated right. </p>
<p>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.</p>

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.

<!DOCTYPE html>
<title>Example</title>
<style>
  div {
    float: left;
    padding: 20px; 
  }
  .gold {
    background: gold;
  }
  .limegreen {
    background: limegreen;
  }
  .orange {
    background: orange;
  }
</style>

<div class="gold">
  Gold
</div>
<div class="limegreen">
  Limegreen
</div>
<div class="orange">
  Orange
</div>