Floating has been around forever; in web terms that means since HTML 2.0 and Netscape 1! You may have been familiar with it as:

<img src="whatever.gif" align="right">

This caused the image to float to the right and the text to flow around the image. However, not all HTML elements could be "floated" using the HTML attribute align. CSS, however, allows you to float anything with the float property.

Float enables designers to move an element out of the normal flow of the document. Think of float like an island. In the box model, each box is given a position with respect to its containing block, but it is not confined by this containing block; it may overflow. Non-positioned block level elements before and after the floated element flow together as if the floated element was not between the non-positioned content. Content flows left around elements floated right and content flows right around elements floated left. Elements that follow will wrap themselves around the floating element until they clear the bottom. Then, they return to the normal flow.

General syntax for the float property:

float: left | right | none

Elements can be floated left, right or none. The float property does not inherit. It is used mostly for images, but can also be used in creating multi-column layouts, which will be discussed later in the term.

<img src="tropical-fish.gif" style="float: left; " /> <img src="yellow-flowers" style="float: right; " /> <img src="blue-cove.jpg" style="float: left; " />

The rules above are applied to the following three paragraphs.

Dead horse The image is the first 'phrase' in the paragraph, so it is aligned with the first line of text in the paragraph. ... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis felis. Sed pulvinar diam et nulla. Praesent mauris risus, lacinia in, consequat et, adipiscing ut, leo. Morbi neque ante, pharetra et, pulvinar ac, facilisis a, augue. Donec sagittis tortor eget libero fermentum dignissim. Quisque et lorem. Fusce et ipsum. Nullam vel sapien nec pede luctus fermentum. Ut feugiat, leo non mattis gravida, felis dui mollis nunc, non auctor diam nisi interdum nisl. Sed a tortor in erat porta laoreet. Donec tempus accumsan lorem. Proin turpis risus, accumsan eu, tempor at, pellentesque a, risus.

Yeah! In this paragraph, the image is the first element in the paragraph, so it is lined up with the top of the paragraph. ... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis felis. Sed pulvinar diam et nulla. Praesent mauris risus, lacinia in, consequat et, adipiscing ut, leo. Morbi neque ante, pharetra et, pulvinar ac, facilisis a, augue. Donec sagittis tortor eget libero fermentum dignissim. Quisque et lorem. Fusce et ipsum. Nullam vel sapien nec pede luctus fermentum. Ut feugiat, leo non mattis gravida, felis dui mollis nunc, non auctor diam nisi interdum nisl. Sed a tortor in erat porta laoreet. Donec tempus accumsan lorem. Proin turpis risus, accumsan eu, tempor at, pellentesque a, risus.

In this paragraph, the image follows this sentence, so it is floated below this line. Dead horse This sentence follows the image, but flows immediately after the first sentence as though the image was not between them. ... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis felis. Sed pulvinar diam et nulla. Praesent mauris risus, lacinia in, consequat et, adipiscing ut, leo. Morbi neque ante, pharetra et, pulvinar ac, facilisis a, augue. Donec sagittis tortor eget libero fermentum dignissim. Quisque et lorem. Fusce et ipsum. Nullam vel sapien nec pede luctus fermentum. Ut feugiat, leo non mattis gravida, felis dui mollis nunc, non auctor diam nisi interdum nisl. Sed a tortor in erat porta laoreet. Donec tempus accumsan lorem. Proin turpis risus, accumsan eu, tempor at, pellentesque a, risus.

Once the text gets below the image, it returns to its normal width. Resize this window and you will see how the text resumes the normal flow when the window is smaller. When an image is floated, it is placed as far to the left (or right) of the parent element (in this case, the "content" DIV) as possible. The elements that follow wrap around the floated element until they pass the bottom of the element box and then they resume the normal flow of the document.

This image below is floated using the rule below:

img {float:left; margin:0 10px 4px 0;}

cute Kazuzl Here is a paragraph of text. It wraps around the image because the image's float property is set to left. I also added a 10 pixel margin to the right and 4 pixels at the bottom of the image so the text doesn't touch the image. Once the text gets below the image, it returns to its normal width. The floated element must be located directly before the non-floated element in the markup for this effect to work. You will be investigating this behavior in this week's homework.

Here is a paragraph of text. It wraps around the image because the image's float property is set to left. I also added a 10 pixel margin to the right and 4 pixels at the bottom of the image so the text doesn't touch the image. Once the text gets below the image, it returns to its normal width. The floated element must be located directly before the non-floated element in the markup for this effect to work.