CSS Float Basics

In CSS, the term float usually describes when an element can be pushed to the far left, or the far right, allowing other elements to wrap around it.  Think of it as how you often see things listed in the dictionary.  You have the description to the left, and the image of that thing you are looking up to the right.

Now let us show you how you can get the most out of CSS float.

Elements on a page are usually floated horizontally, (left or right) rather than up or down.  When an element is floated, it will move as far to the left or to the right as it can.  The other elements around it will then be wrapped around it – as you can see in the picture above.

CSS Float Basics

This is the CSS code you would need to make an image float to the right, when placed in front of a block of text:

img
{
float:right;
}

Floating in class or id elements!

You can also define the float tactic when working with a class or id, like so:

.picture
{
float:left;
width:110px;
height:90px;
margin:5px;
}

Stop the Floating!

Elements after the floating element will flow around it. To avoid this, use the clear property:

.text_line
{
clear:both;
}

Try playing around with floating images or boxes of text to the left or right on your own web site layout, and see what you can learn from doing so.  The best way to learn about CSS and designing is to try it yourself.  This floating technique is also often used to make menus hover to the left or right of a web page’s layout, which in turn would eliminate the need for HTML tables.

We hope this comes in handy!