How to Use the CSS Float Property

  • google plus

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 Register

Instructions

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

Author: Chris Minnick

Chris is a prolific author and trainer, and the CEO of WatzThis?. His published books include Writing Computer Code, JavaScript for Kids, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW eCommerce Certification Bible, and New Riders' XHTML.

Discuss