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:

<div style="width: 200px;
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:

<div style="width: 200px;
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:

<div style="width: 200px;
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:

<div style="width: 200px;
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:

<div style="width: 200px;
height: 100px;
background: #e9d2e4;
float: left; ">
</div>
<div style="width: 200px;
height: 100px;
background: #d4ecfb;
float: left; ">
</div>
<div style="width: 200px;
height: 100px;
background: #e0edc5;
float: left; ">
</div>
<div style="width: 200px;
height: 100px;
background: #fcd9c5;
float: left; ">
</div>

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:

<div style="clear: both"></div>

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 >
Re-Vision.com

projects:
Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
US
Along the Mississippi River
The Work of Antoni Gaudí
Graffiti

places:
Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

archive:
Graphics, sounds, and other ancient
items from the dawn of the Web.


FWIW:
Biography

©
Jay Boersma