CSS Float : an alternative to tables

CSS Float : an alternative to tables

If you fully want to use css to create your page layout a definite requirement is the float property. It not only allows you to 'float' elements left or right, but using float you can create columns by using HTML block elements (<div> is most often used).

I'll explain using the example below:

<div><img src="chrysanthemum.jpg" alt="Chrysanthemum" /></div>
<div><p>This is some text that describes the flower image.</p></div>

Since the <div> element is a block element it will look like:

If we want to have the image on the left and the text to the right we need the 'float' property. By placing "float:left;" in the div that contains the image the <div> suddenly doesn't break after it, but allows the next <div> element to be places to the right of it.

<div style="float:left"><img src="chrysanthemum.jpg" alt="Chrysanthemum" /></div>
<div><p>This is some text that describes the flower image.</p></div>

This will look like:

You can also use "float:right" which moves the image <div> to the right (even though it is still first in the HTML code)

<div style="float:right"><img src="chrysanthemum.jpg" alt="Chrysanthemum" /></div>
<div><p>This is some text that describes the flower image.</p></div>

Summary

The float property enables you to create complex lay-outs without using tables. This tutorial shows you the basic usage.

Tags: (CSS float | CSS float:left | CSS float:right)

• Twitter: CSS Float : an alternative to tables
• Stumbleupon
• Google
• Linked In