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.
And here for another one.

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

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma