Re-vision - Photography and Graphics by J. Boersma - Webwork HTML Tutorial

Webwork

Floating Content

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:

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:

Plus a little margin to keep the text away from the div's right edge:

Same thing float: right:

Four divs, each with a different background color:

The code for above:

<div style="float: left; width: 200px; height: 100px; background: #e9d2e4; font: 11px/14px verdana, sans-serif; color: #999">
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.

Click here for a demo.

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":

<div style="margin-left: auto; margin-right: auto; width: 500px; ">
<p>Centered div.</p>
</div>

Centered div.

If you want centered text within the centered div, you add text-align: center:

<div style="margin-left: auto; margin-right: auto; width: 500px; text-align: center; ">
<p>Centered text in a centered div.</p>
</div>

Centered text in a centered div.

< Previous | Webwork Table of Contents | Next >