float

The float property lets you wrap text around any tag. You can already do this for pictures by using the align attribute of the <img> tag to let the text flow around the picture. This property allows you to do the same with other tags so you can float a table, a heading or a paragraph. For example, you could float a paragraph to the right-hand side and give it a different background colour. The float property allows you to have side-by-side paragraphs.

You can set the following values: left, right or none.

If you use the float property, you must also specify the width property.

Here is the style definition:

.float {color: red;
        background: silver;
        float: right;
        width: 1.5in;
        padding: 0.2in;}

Here is the HTML:

<p><span class="float">The red text that you want to float 
to the right in the silver box</span></P>
<p>Here is a whole load of blurb about that makes up 
an article. It can be anything you like</P>
<p>The text in the floating box might be a quote that 
you pull out from the main body of the article.</p>

Here is what it looks like:

Netscape supports float quite well but Internet Explorer is buggy. It will probably work properly in future releases but at the moment you need the <span> tag round the floating text to make it work. You must also set a width.

You can also create a drop capital or any fancy first character. Set up the style definition:

.dropcap {color: red;
          float: left;
          width: 0.1in;
          font-size: 36pt;
          font-weight: bold;
          font-family: lithograph}

Here is the HTML:

<p><span class="dropcap">A</span>nn's fancy paragraph</P>

Here is what it looks like:

You can put more than one float side-by-side.