How to Use the CSS Float Property
The CSS float
property causes an element to be positioned along the left edge or the right edge of its
container. The float
property can be applied to any element that is not absolutely positioned.
Possible values of the float
property are:
- left
- right
- none
When an element floats left it will be aligned to the left of the containing element
and all subsequent content will align to its right until the bottom of the element is
reached, as shown in this example:
When an element floats right it will be aligned to the right of the containing element
and all subsequent content will align to its left until the bottom of the element is
reached, as shown in this example:
The code used to create the results above is shown below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Float</title>
<style type="text/css">
.container {
width: 150px;
border: 2px solid #000;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
</style>
</head>
<body>
<h2>Float Left</h2>
<div class="container">
<img src="Images/block.gif" class="floatLeft">
<p>This is just text. This is just text. This is just text.
This is just text. This is just text.</p>
</div>
<h2>Float Right</h2>
<div class="container">
<img src="Images/block.gif" class="floatRight">
<p>This is just text. This is just text. This is just text.
This is just text. This is just text.</p>
</div>
</body>
</html>