CSS float

The float CSS property can make HTML elements float to the left or right inside their parent element. Content inside the same parent element will move up and wrap around the floating element.

Look at this HTML code:

<div style="border:1px solid #cccccc;">

  This is the first text

  <div style="border: 2px solid red;">This is box 1</div>
  <div style="border: 2px solid green;">This is box 2</div>

  This is the last text
</div>

The HTML code contains a div element which has a text, two div elements and another text inside its body. When rendered, here is what that looks like:

In the following sections I will show you how to make the two nested div elements float left and right inside their parent element.

 

float : left

Now, let us try to make the first nested div element float left using the float CSS property. We do so by setting float to the value left. Here an example showing that:

<div style="border:1px solid #cccccc;">

  This is the first text

  <div style="float: left; border: 2px solid red;">This is box 1</div>
  <div style="border: 2px solid green;">This is box 2</div>

  This is the last text
</div>

Here is what the example looks like with the left floating element when rendered in the browser:

Notice how the first div element (with the red border) now floats to the left inside its parent element. The first text is now wrapping nicely around the first div element, to the right of it. The second div element is still positioned below the first div element, and the last text below that.

Now, let us try to make the second nested div float left too. Here is what the code looks like:

<div style="border:1px solid #cccccc;">

  This is the first text

  <div style="float: left; border: 2px solid red;">This is box 1</div>
  <div style="float: left; border: 2px solid green;">This is box 2</div>

  This is the last text
</div>

And here is what the code looks like when rendered in the browser:

Now both the first and second nested div element is floating to the left inside their parent element. The text wraps nicely around the two floating elements.

 

float : right

Now let us try to make the second nested div float to the right instead. We do so by setting its float CSS property to right instead of left. Here is the code:

<div style="border:1px solid #cccccc;">

  This is the first text

  <div style="float: left; border: 2px solid red;">This is box 1</div>
  <div style="float: right; border: 2px solid green;">This is box 2</div>

  This is the last text
</div>

Here is what it looks like when rendered in the browser:

See how the two elements are now floating in each their direction inside their parent element. They are even located at the same vertical position (towards the top of the parent element). The text now wraps around the two div elements by being rendered between the div elements.

 

clear

Now, let us add a third div element which also floats left:

<div style="border:1px solid #cccccc;">

  This is the first text

  <div style="float: left; border: 2px solid red;">This is box 1</div>
  <div style="float: right; border: 2px solid green;">This is box 2</div>
  <div style="float: left; border: 2px solid red;">This is box 3</div>

  This is the last text
</div>

This is what the code looks like now, when rendered in a browser:

Notice how the two left floating elements are positioned at the same horizontal "line", after each other.

Imagine now that you want the two div elements with the red borders to float left, but under each other instead of next to each other. To do that, you need to set the clear CSS property.

The clear CSS property can take one of these values:

• left
• right
• both
• none

The left value means that the element should stay clear of all left floating elements. The right value means that the element should stay clear of all right floating elements. The both value means that the element should stay clear of both left and right floating elements. The none value means no clearing, which is the same as leaving out the clear CSS property.

Let us set the clear CSS property of the last div element to left. Then the last div element should still float left, but stay clear of the first left floating div element. Here is how the code looks:

<div style="border:1px solid #cccccc;">

  This is the first text

  <div style="float: left;  border: 2px solid red;">This is box 1</div>
  <div style="float: right; border: 2px solid green;">This is box 2</div>
  <div style="float: left; clear: left border: 2px solid red;">This is box 3</div>

  This is the last text
</div>

Here is what the code looks like when rendered in a browser:

Notice how the last div element still floats left, but stays under (clear of) the first left floating div element.