quick tutorials
Floating images
In print based publication, it's common for text to flow around images. CSS lets us do this with web pages. Here we will learn how to take advantage of the CSS float property to achieve this effect.
Note that floating is far from brilliantly supported inmost browsers. Internet Explorer 4.5 for Macintosh and 4.5 and 5 for Windows support it well enough to rely upon for many situations, though you'll need to test thoroughly. Other browsers may support float enough for simple situations, but don't count on it.
In our HTML
There is nothing particular we need to do in our HTML to achieve this effect. Simply put the HTML for the image or images you ant the text to flow around in the paragraph which you want to flow around the image or images. For example
<P><img class="left-floating" src="leftimage.gif">The image that is floating to the left is simply part of this paragraph. It is to the left, rather than inline, because we have used the CSS float property to specify that the image should float outside and to the left of the paragraph which it is in.</P>
Note that the image does not need to appear anywhere special in the HTML. It could appear at the beginning, the end or anywhere within the paragraph.
In our style sheet
In our style sheet we need to create a statements for the left-floating class of image. In it, we want to use the float property to specify that elements of this class float to the left of the paragraph (or other elements) which contain them.
We should be familiar with class selectors now, and have no trouble with the IMG selector
IMG.left-floating
Now all we need to do is to add the float property. Simply
IMG.left-floating {float: left}
Theoretically, float in conjunction with the clear property will allow us to create sophisticated layouts that until now would have required the use of tables. Hopefully soon, the major browsers will support these properties well enough, and we can do away with those hacks for good.