CSS Float Property - Float: Left;

This post is part of a CSS Layout course that you can take with us to learn how to create CSS Layouts using HTML and CSS float layout technique. This post will make sense to you the most if you watch the accompanying videos described in the course description at the end of this post. You might still be able to find useful information in this post even if you don't take the course but that's primarily not the goal of this post.

To illustrate what float: left; does, let's take a look at a simple example.

Here, we have a simple HTML page with three divs in it. First let's take a look at the code and a screen shot of it in Firefox:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>new</title>
		<meta name="description" content="">
		<style>
			* {
				margin: 0; 
				padding: 0; 
			}
			body {
				background-color: #8c8c8c; 
			}
			div {
				color: black; 
				background-color: white; 
				padding: 1em; 
				margin: 1em; 
				border: 0.125em solid red; 
			}
		</style>
	</head>

	<body>
		<div id="box1">Box1</div>
		<div id="box2">Box2</div>
		<div id="box3">Box3</div>
	</body>
</html>

Now, let's float the divs to the left and see what happens:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>new</title>
		<meta name="description" content="">
		<style>
			* {
				margin: 0; 
				padding: 0; 
			}
			body {
				background-color: #8c8c8c; 
			}
			div {
				float: left; 
				color: black; 
				background-color: white; 
				padding: 1em; 
				margin: 1em; 
				border: 0.125em solid red; 
			}
		</style>
	</head>

	<body>
		<div id="box1">Box1</div>
		<div id="box2">Box2</div>
		<div id="box3">Box3</div>
	</body>
</html>

As you can see, the boxes have been floated to left.

The width of all the floated boxes have automatically shrunk down to the necessary width to accommodate the content inside them. This is called shrink wrap in CSS jargon by the way. This is useful when you are building a navigation menu for instance. Imagine, instead of divs, you had a set of li's and you wanted to build navigation menu buttons out of those li's. The shrink wrap effect would be then the perfect coincidence. 

If for any reason, you don't want the the floated boxes to have the width of their content, you need to give them a fixed width like the following example:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>new</title>
		<meta name="description" content="">
		<style>
			* {
				margin: 0; 
				padding: 0; 
			}
			body {
				background-color: #8c8c8c; 
			}
			div {
				float: left;
				width: 25%; 
				color: black; 
				background-color: white; 
				padding: 1em; 
				margin: 1em; 
				border: 0.125em solid red; 
			}
		</style>
	</head>

	<body>
		<div id="box1">Box1</div>
		<div id="box2">Box2</div>
		<div id="box3">Box3</div>
	</body>
</html>

As mentioned before, this post is part of the documentation section of a CSS Layout course. In this course, you can learn how to create flexible layouts using the "float" CSS property. You can take this course with us at the following address: