Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.

www.westciv.com

They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us info@westciv.com.

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.

Web Directions Conference
Style Master CSS Editor