CSS float

Jakob Jenkov
Last update: 2019-06-03

The CSS float 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. In this CSS float tutorial I will explain how the CSS float property works in more detail.

CSS Float Example

To illustrate how the CSS float property works, let us first look at an HTML example:

<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:

HTML elements with no CSS float

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

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 the CSS float property of the HTML element to the value left. Here an example showing a div element with the CSS float property set to 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="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:

HTML elements with one float : left element

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:

HTML elements with two float : left elements

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:

HTML elements with a float : left and float : right element

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:

HTML elements with no float

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:

HTML elements with no float

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

Jakob Jenkov

Featured Videos

Java Generics

Java ForkJoinPool

P2P Networks Introduction



















Close TOC
All Tutorial Trails
All Trails
Table of contents (TOC) for this tutorial trail
Trail TOC
Table of contents (TOC) for this tutorial
Page TOC
Previous tutorial in this tutorial trail
Previous
Next tutorial in this tutorial trail
Next