Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

CSS Float Property

In addition to relative and absolute positioning of an element, another way to position an element is to use the float property. Many of the images posted on these tutorial pages are “floated” elements, including the picture of the root beer float to the right.

Sorry if you thought this was about making a great root beer float. Here’s a hot tip though . . . when making a root beer float, never substitute ketchup for root beer if you’re out of root beer!

Here’s how I floated that float:

What is delayed content? It's content that appears on a web page only after a specified amount of time has elapsed. What can it be used for?

<img src="rootbeer.jpg" 
 style="float: right; 
 width: 180px; 
 height: 290px;
 margin-left: 17px;"
 alt="Num-yummy!">

This example uses an inline style to add the float property and value to an image tag. The second line of that code example is what made the image float to the right. The possible values for the float property are:

left | right | none

By default, an image aligns to the left, but text will not flow alongside it without the float property (unless you use deprecated HTML or a table). Without adding the float property, one line of text would align with the bottom of the image and the rest of the text will drop below it.

By adding a value of left or right to the float property the text is free flow beside the image until it clears the image, at which point it will drop below it. A value of none is the same as not adding a float property to the image.

If you want the text to stop flowing beside an image and to drop down below it, you can add the clear property and value to a break tag. Here’s how that works:

<br style="clear: right;">

That clears anything floated to the right. It doesn't have to be a <br> tag, you can use the clear property with any block level elephant . . . I mean, element.

The other values I could have used are left to clear any left floated content; or both to clear both left and right floats. The last option is none, to clear, well, nothing. Who makes up these rules?

The float property can be added to more than just images, too. You’ll see many “notes” on the side of these tutorials. These "side notes" are added by floating a division or paragraph to the right. By adding a background color and/or border to the floating side note, it is set apart nicely from the main body of text.

How about it, does this tutorial float your boat, or get your goat?