Float

Contact Us or call 1-877-932-8228
Float

Float

Float can be applied to any element that is not absolutely positioned. It is used to specify whether an element should float to the left, to the right, or not at all. Possible values are listed below.

  • 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:Float Left

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:Float Right

The code used to create the results above is shown below:

Code Sample:

PositioningAndVisibility/Demos/Float.html
<!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>

Code Explanation

Next