CSS float Property
The float property sets whether an element is floated or not. Floating an element takes it out of the normal flow of the document and generates a block box which is floated to the right or left of the current line depending on the value given.
Possible Values
- left - the element block box is floated to the left.
- right - the element block box is floated to the right.
- none - the element box is not floated.
- inherit - the value is inherited from the parent element.
Code Example
div{float: left;}
When an element is floated other content is allowed to flow down its' side, the right hand side for left floated boxes and the left hand side for right floated boxes. Content can be prohibited from being displayed next to a float with the clear property. The float property can be applied to all elements except ones with a position value of absolute or fixed.
Float examples
In the first two examples there is a parent <div> containing two other elements, firstly an <img> element with the
property {float: left;} in the top example and {float: right;} in the lower and secondly a <p>
element made up of a paragraph of text. The containing <div> has been given a border for
illustration purposes and both the <img> and <p> elements have left and right margins of 5%.
img{float: left;}
As you can see the text flows along the right hand side of the floated image and the line length is adjusted accordingly by the browser. As you can see the text flows along the right hand side of the floated image and the line length is adjusted accordingly by the browser. As you can see the text flows along the right hand side of the floated image and the line length is adjusted accordingly by the browser. As you can see the text flows along the right hand side of the floated image and the line length is adjusted accordingly by the browser. As you can see the text flows along the right hand side of the floated image and the line length is adjusted accordingly by the browser. As you can see the text flows along the right hand side of the floated image and the line length is adjusted accordingly by the browser. As you can see the text flows along the right hand side of the floated image and the line length is adjusted accordingly by the browser.
img{float: right;}
As you can see the text flows along the left hand side of the floated image and the line length is adjusted accordingly by the browser. As you can see the text flows along the left hand side of the floated image and the line length is adjusted accordingly by the browser. As you can see the text flows along the left hand side of the floated image and the line length is adjusted accordingly by the browser. As you can see the text flows along the left hand side of the floated image and the line length is adjusted accordingly by the browser. As you can see the text flows along the left hand side of the floated image and the line length is adjusted accordingly by the browser. As you can see the text flows along the left hand side of the floated image and the line length is adjusted accordingly by the browser. As you can see the text flows along the right hand side of the floated image and the line length is adjusted accordingly by the browser.
You will notice that once the text has gone past the bottom of the floated image it is displayed across the full width of the parent element(less the margins).
Double floats - three column layout.
Floated <div> elements can be used to create a three column layout by floating one <div>
left, one right and having a central <div> positioned normally with a left-margin equal to the
width of the left floated <div> and a right-margin equal to the width of the right floated
<div>. The code for the three <div> elements used for the three columns could be written in its simplest form
as follows:
div.left{float:left: width:20%;} - Left floated div with a width of 20%.
div.right{float:right: width:20%;} - Right floated div with a width of 20%.
div.center{margin-left:20% margin-right:20%;} - Central div with margins on both sides of 20%.
The result of this code can be seen here used with three paragraphs elements, two having a width of 20%, floated left and right respectively and the central paragraph of text having left and right margin values of 20%.
Left floated <div> with a width of 20%.
Right floated <div> with a width of 20%.
Central <div> with margins equal to the width of the left and right floated <div>'s.