CSS Float Right

CSSFloat — Sun, 10 Jan 2010 18:51:51 +0000

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.

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…

CSS Float Left Example

CSSFloat — Sun, 10 Jan 2010 15:02:28 +0000

Here’s an example of using CSS Float to float an item left.

The square below with a blue border 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.

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

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

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

and the html code…

Contents of the blue square

Text to the right of the Blue square.