In Brief...
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.
Take our Advanced CSS Training course for free.
See the Course Outline and RegisterInstructions
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>