Float Right and Document Flow

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 understand how float influences the normal document flow on a web page, let's take a look at the following example.

In this example we have five div's in the body. Here's the HTML source code and a screen shot 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> 	
		<div id="box4">box4</div>
		<div id="box5">Box5</div>
		
	</body>
</html>
Five normal block level div's Firefox screen shot
Five normal block level div's Firefox screen shot.Click the image to enlarge (JavaScript required).

Now, let's float Box1, Box2 and Box3 to the right and see what happens. We're going to give them a fixed width of 25% each as well:

<!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; 
			}
			div#box1, 
			div#box2, 
			div#box3 {
				float: right; 
				width: 25%; 
			}
		</style>
	</head>
	<body>
		<div id="box1">Box1</div>
		<div id="box2">Box2</div>
		<div id="box3">Box3</div> 	
		<div id="box4">box4</div>
		<div id="box5">Box5</div>
		
	</body>
</html>
Five Divs, three of which are floated to right Screen shot
Five Divs, three of which are floated to right - Screen shot. Click the image to enlarge (JavaScript required).

As you can see, the three floated div's, Box1, Box2 and Box3 have been taken out of the document flow. Their original place has been freed and so Box4 and Box5 have moved to the top of the browser window or viewport.

Moreover, the three floated div's, Box1, Box2 and Box3 don't know anything about the document flow anymore and so they have been placed over Box4 and Box5.

This kind of collision problem usually happens and there are many solutions each of which is applied in certain situations. One general solution is "clear". You generally need to "clear" the box that you want to stay below the floated div or div's. To clarify, let's 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 {
				color: black; 
				background-color: white; 
				padding: 1em; 
				margin: 1em; 
				border: 0.125em solid red; 
			}
			div#box1, 
			div#box2, 
			div#box3 {
				float: right; 
				width: 25%; 
			}
		</style>
	</head>
	<body>
		<div id="box1">Box1</div>
		<div id="box2">Box2</div>
		<div id="box3">Box3</div> 	
		<div id="box4" style="clear: both;">box4</div>
		<div id="box5">Box5</div>
		
	</body>
</html>
Five Div's, three of them floated and one of them cleared screen shot
Five Div's, three of them floated and one of them cleared screen shot. Click image to enlarge (JavaScript required).

As you can see, a CSS style has been given to Box4 (clear: both;) and now both the Box4 and Box5 stay below the three floated boxes. That means, no matter where the three floated boxes are on the page, the cleared box will stay below them at all times. You can read more about closing floats in another article.

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: