The CSS float Property
The float property sets how an element floats within its container. It places the element on the left or right side, letting text and inline elements wrap around it.
It can take these values:
left— the element floats to the left of its container.right— the element floats to the right of its container.none— the default. The element does not float and stays where it appears in the text.inherit— the element takes the float value of its parent.
Tip: The float property is often used to wrap text around images.
CSS float: right Example
float: right floats an element to the right of its container.
Tip: Make the window smaller to see the text wrap around the floated element.
Example
The box floats to the right and the text wraps around its left side.
<style> block, float a colored box (stand-in for an image) to the right with some left margin. Add a paragraph of text that wraps around the left of it.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.imgbox {
float: right;
width: 170px;
height: 170px;
background-color: #4CAF50;
margin-left: 15px;
}
</style>
</head>
<body>
<div class="imgbox"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. The box floats to the right and the text wraps around it. Make the window smaller to see the wrapping change.</p>
</body>
</html>
CSS float: left Example
float: left floats an element to the left of its container.
Example
The box floats to the left and the text wraps around its right side.
<style> block, float a colored box (stand-in for an image) to the left with some right margin. Add a paragraph of text that wraps around the right of it.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.imgbox {
float: left;
width: 170px;
height: 170px;
background-color: #4CAF50;
margin-right: 15px;
}
</style>
</head>
<body>
<div class="imgbox"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. The box floats to the left and the text wraps around it. Make the window smaller to see the wrapping change.</p>
</body>
</html>
CSS float: none Example
float: none means the element does not float and stays in the normal flow.
Example
The box stays in the normal flow and the text does not wrap around it.
<style> block, set a colored box (stand-in for an image) to float none. Add a paragraph; the text does not wrap around the box.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.imgbox {
float: none;
width: 170px;
height: 170px;
background-color: #4CAF50;
}
</style>
</head>
<body>
<div class="imgbox"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. With float: none the box stays in the normal flow and the text does not wrap around it.</p>
</body>
</html>
CSS Float Next To Each Other
Floating several elements left makes them line up next to each other.
Example
Three colored divs are floated left so they sit side by side.
<style> block, float div elements left with 15px padding, and give .div1 a red background, .div2 yellow, and .div3 green. Add three divs so they sit side by side.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}
</style>
</head>
<body>
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>
</body>
</html>