9.2 Floating Elements

An element (box and contents) can be floated to the right or left in a document (or a containing box) by using the float property. A common example is where text needs to wrap around a picture:

Computer Keys

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet nunc. Pellentesque erat nulla, posuere a, placerat id, dictum at, enim. Aliquam non ligula. Donec odio mi, tempus sed, adipiscing non, placerat ut, orci. Aenean mauris tellus, fermentum id, feugiat quis, dapibus quis, erat. Nulla id nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas tempus pulvinar tellus. Vestibulum tristique, velit quis tincidunt laoreet, dolor nibh aliquam elit, suscipit adipiscing libero purus non tortor. Integer tincidunt, pede porttitor vulputate accumsan, enim dolor tempus nulla, elementum luctus augue nulla vel lorem.

To make the picture float to the left and have the text surround it, the float property is set to left in the style sheet (here we are defining an id selector):

#picture1	{float:left;}

And in the html page, we add the following (using div and class):

<div class="picture1">
<img src="images/keys.jpg" alt="computer keys">
</div>
<p>Lorem ipsum dolor sit...etc...nulla vel lorem.</p>

Where this really come in useful is for creating columns, as most web page layouts generally have a header, two or three columns and a footer. For example, in the html page:

<div id="column1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="column2">
<p>Cras sit amet nunc. Pellentesque erat nulla, posuere a, 
  placerat id, dictum at, enim.</p>
</div>
<div id="column3">
<p>Aliquam non ligula. Donec odio mi, tempus sed, adipiscing
  non, placerat ut, orci.</p>
</div>

And in our style sheet, the width of the columns could be set to 33% and then each column is floated to the left by defining the float property:

#column1	{float:left;
		width: 33%;}

#column2	{float:left;
		width: 33%;}

#column3	{float:left;
		width: 33%;}

This would look something like this in a browser:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Cras sit amet nunc. Pellentesque erat nulla, posuere a, placerat id, dictum at, enim.

Aliquam non ligula. Donec odio mi, tempus sed, adipiscing non, placerat ut, orci.

Float can be set as either left, right or none. The clear property is used to control how the subsequent elements of floated elements behave. By default, these are moved up to fill available space created when a box is floated to a side. The clear property can assume the values left, right, both or none. If clear is set to both for a box, the top margin border of this box will always be under the lower margin border for possible floating boxes coming from above.

Referring back to the previous example, if we wanted subsequent text not to float like this:

computer keys

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet nunc. Pellentesque erat nulla, posuere a, placerat id, dictum at, enim. Aliquam non ligula.Donec odio mi, tempus sed, adipiscing non, placerat ut, orci.

Aenean mauris tellus, fermentum id, feugiat quis, dapibus quis, erat. Nulla id nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas tempus pulvinar tellus. Vestibulum tristique, velit quis tincidunt laoreet, dolor nibh aliquam elit, suscipit adipiscing libero purus non tortor. Integer tincidunt, pede porttitor vulputate accumsan, enim dolor tempus nulla, elementum luctus augue nulla vel lorem.

To avoid the bottom text from floating up next to the picture, the following could be added to the stylesheet:

#picture1	{float:left;}

.floatstop	{clear:both;}

And the html code looks like this:

<div class="picture1">
<img src="images/keys.jpg" alt="computer keys">
</div>
<p>Lorem ipsum dolor...etc...non, placerat ut, orci.</p>
<p class="floatstop">Aenean mauris tellus, fermentum...etc...
   augue nulla vel lorem.</p>

Floats are useful in many situations and are often used together with positioning.