Float

Float allows an element to be positioned to the left or the right of its containing box's padding.

 

Other content flows around the floated box.

 

Property Description Value
float Specifies whether a box should be floated left 

right

none

inherit

 

 

Multiple floated boxes align against each other, horizontally, if there's room, or down the page otherwise.

 

Syntax:

#myBox { float: left; }

 

*note: Open this article in a tab on its own to see the 4th box floating next to the 3rd

Containing Box

 

 

Here's an example of an image being floated within its containing box and the rest of the text content being wrapped around it:

<!DOCTYPE html>
<html>
	<head>
		<title>My Document Title</title>
		<style type="text/css">
			* { font:bold 1em Arial; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }
			#internal { position:relative; width: 460px; height:auto; background-color:#df9; margin:1em 0; padding:1em; }
			img {position:relative; float:right; margin:1em; }
		</style>
	</head>
	<body>
		<div id="internal">
			<img src="lipsum.png" /><p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.</p>
		</div>
	</body>
</html>

Save & refresh browser:

iframe source*

 

 

 

clear

 

As can be seen in the above, elements after the floating element will flow around it.

 

This can be avoided by using the clear property.

 

Syntax:

#myDiv { clear: right; }

 

 

Property Description Value
clear Specifies which sides of the containing element other floating elements are not allowed both 

left

right

none

inherit

 

 

Notice line 9 now has the clear property defined on the <p> element:

<!DOCTYPE html>
<html>
	<head>
		<title>My Document Title</title>
		<style type="text/css">
			* { font:bold 1em Arial; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }
			#internal { position:relative; width: 460px; height:auto; background-color:#df9; margin:1em 0; padding:1em; }
			img {position:relative; float:right; margin:1em; }
			p {clear: right; }
		</style>
	</head>
	<body>
		<div id="internal">
			<img src="lipsum.png" /><p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.</p>
		</div>
	</body>
</html>

Save & refresh browser:

iframe source*

Leave a Reply