CSS Float Property - Float: Right;

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: right; does, let's take a look at a simple example.

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>float: right;</title>
		<meta name="description" content="Learn what float: right; does.">
		<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>
Three Normal block level div's. Screen shot in Firefox
Three Normal block level divs screen shot - click to enlarge the photos (JavaScript required).

Now, let's float the div's to the right and see what happens:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>float: right;</title>
		<meta name="description" content="Learn what float: right; does.">
		<style>
			* {
				margin: 0; 
				padding: 0; 
			}
			body {
				background-color: #8c8c8c; 
			}
			div {
				float: right;
				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>
Three block level div's floated to left. Screen shot in Firefox
Three normal block level div's floated to right. Click the image to enlarge (JavaScript required).

As you can see, the div's have all been floated to the right. 

On the far right hand side, you can see Box1 which has appeared in the HTML source code first. Next there's Box2 which came second in the source code and lastly, there's Box3 which came last in the source code. 

All the three floated div's have shrunk in width and now they have the width of the content inside them. That's called shrink wrap in CSS Jargon. 

If, for any reason, you don't want shrink wrap to happen, you can give the div's a fixed width. Take a look at the following example:

 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>float: right;</title>
		<meta name="description" content="Learn what float: right; does.">
		<style>
			* {
				margin: 0; 
				padding: 0; 
			}
			body {
				background-color: #8c8c8c; 
			}
			div {
				float: right;
				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>
three block level div's floated to right having a fixed width screen shot
Three block level div's floated to right having a fixed width screen shot. Click the image to enlarge (JavaScript required).

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: