float: ***;

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O

The float property creates a floating box.


div {
float: left;
}
Property Value Explanation
float left the box floats to the left
(the text wraps to the right of the box)
right the box floats to the right
(the text wraps to the left of the box)
none the box doesn't float (default)

Please see the "clears float" when you specified the left or right.

Example

The text wraps

<html>
<head>
<title>TAG index</title>

<style type="text/css">

#exampleA {
width: 100%;
}

#example1 {
width: 50%;
height: 100px;
background-color: #85b9e9;
float: left;
}

#example2 {
width: 50%;
height: 100px;
background-color: #85b9e9;
float: right;
}

</style>

</head>
<body>

<div id="exampleA">

<div id="example1">The box floats to the left</div>
<p>
The text wraps to the right of the box.<br>
This is example text.<br>
This is example text.
</p>

<p style="clear: left;">--- Clears the left float ---</p>

<div id="example2">The box floats to the right</div>
<p>
The text wraps to the left of the box.<br>
This is example text.<br>
This is example text.
</p>

<p style="clear: right;">--- Clears the right float ---</p>

</div>

</body>
</html>
Output
The box floats to the left

The text wraps to the right of the box.
This is example text.
This is example text.

--- Clears the left float ---

The box floats to the right

The text wraps to the left of the box.
This is example text.
This is example text.

--- Clears the right float ---

The box wraps

<html>
<head>
<title>TAG index</title>

<style type="text/css">

#exampleB {
width: 300px;
}

.example3 {
width: 90px;
height: 100px;
background-color: #85b9e9;
margin-right: 10px;
float: left;
}

</style>

</head>
<body>

<div id="exampleB">

<div class="example3">The first box</div>
<div class="example3">The second box</div>
<div class="example3">The third box</div>
<p style="clear: left;">--- Clears the left float ---</p>

</div>

</body>
</html>
Output
The first box
The second box
The third box

--- Clears the left float ---