Using the float tag, you can move elements horizontally on the page—either to the left or the right. (There is no float: center. By default, everything floats: top and there is no float: bottom.)
To illustrate this, we'll start with a div that does not float followed by some placeholder text:
height: 100px;
border: #ccc solid 1px; ">
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Then same thing with float: left added:
height: 100px;
border: #ccc solid 1px;
float: left; ">
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Plus a little margin to keep the text away from the div's right edge:
height: 100px;
border: #ccc solid 1px;
float: left;
margin-right: 15px; ">
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Same thing float: right:
height: 100px;
border: #ccc solid 1px;
float: right;
margin-left: 15px; ">
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Four divs, each with a different background color:
height: 100px;
background: #e9d2e4;
float: left; ">
</div>
height: 100px;
background: #d4ecfb;
float: left; ">
</div>
height: 100px;
background: #e0edc5;
float: left; ">
</div>
height: 100px;
background: #fcd9c5;
float: left; ">
</div>
The code for above:
width: 200px;<br />
height: 100px;<br />
background: #e9d2e4;<br />
<span style="color: #900">float: left;</span>
</div>
<div style="float: left; width: 200px; height: 100px; background: #d4ecfb; font: 11px/14px verdana, sans-serif; color: #999">
width: 200px;<br />
height: 100px;<br />
background: #d4ecfb;<br />
<span style="color: #900">float: left;</span>
</div>
<div style="float: left; width: 200px; height: 100px; background: #e0edc5; font: 11px/14px verdana, sans-serif; color: #999">
width: 200px;<br />
height: 100px;<br />
background: #e0edc5;<br />
<span style="color: #900">float: left;</span>
</div>
<div style="float: left; width: 200px; height: 100px; background: #fcd9c5; font: 11px/14px verdana, sans-serif; color: #999">
width: 200px;<br />
height: 100px;<br />
background: #fcd9c5;<br />
<span style="color: #900">float: left;</span>
</div>
To end floating (for example, if you wanted text to no longer wrap around a div), you would add a clear tag:
Re-flowing the page:
In addition to allowing you to wrap text around elements, floating is useful when you want content to re-flow when the browser window size is changed.
Centering a div:
Although there is no float: center option, you can get a div to center on the page by setting both left and right margins to "auto":
<p>Centered div.</p>
</div>
Centered div.
If you want centered text within the centered div, you add text-align: center:
<p>Centered text in a centered div.</p>
</div>
Centered text in a centered div.
