Floats

The float property moves an element to the left or right within its containing element, outside of the default positioning.

Syntax

The float property primarily uses the following three values:

  • The left value that makes the element float on the left of its container.
  • The right value that makes the element float on the right of its container.
  • The none value that causes the element not to float.
.item_x {
  float: none;
}

.item_y {
  float: left;
}

.item_z {
  float: right;
}

Example

<section>
<div class="item_1">
<p>This is the first item and I will float left.</p>
</div>
<div class="item_2">
<p>This is the second item and I will float right.</p>
</div>
<br />
<br />
<br />
<p>This example shows CSS floats and I wont float at all.</p>
</section>

In the above snippet, the elements with the class item_1 and item_2 can be set to float in an external style sheet.

.item_1 {
float: left;
}
.item_2 {
float: right;
}
div {
border: thick double black;
}
section > p {
margin: auto;
text-align: center;
width: 50%;
}

The <div> tags with the .item_1 and .item_2 classes will float to the left and right of the “CSS floats” text, respectively.

Image of rendered float elements

Edit this page on GitHub

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your feedback.

Learn CSS on Codecademy