CSS Float

CSS Float is the best resource for learning how to use the CSS float property.

A brief intro...

CSS stands for Cascading Style Sheet. It's incredibly useful for designing websites. Take for instance the colour, font, text-size of the h1 tag "CSS Float", this was all set by CSS.

CSS Float Left Example

Here's an example of an item floated left.

The blue square is a div tag aptly named "floatleftexample".

In order for the blue square to float left of this text, the floatleftexample div must be above this paragraph in the html code.

Float Left Code

Let's start with the CSS code. This can be placed between style tags or in an external stylesheet.

.floatleftexample {float: left; width: 400px;}

That's it! Pretty simple eh? Remember to include a width to make the CSS valid.

and the html code...

CSS Float Right

Floating an element right is exactly like floating left, except the code is

{float: right;} ie. #floatrightexample {float: right;}

This time we're going to be floating an image that already has its width defined. Hence, there's no need to include the width in the CSS code.

Tmace - Upload GIF, JPG, BMP, PSP, PSD & more

Also, did you notice the change in the CSS code?

We used a '#' instead of a '.'. This simply refers whether we're using id or class, this is important for creating valid CSS.

The html code will look something like this...