Webmaster Logo.Learn HTML and CSS.  
Click to see the benefits of becoming a member.Read the current issue of Almost a NewsletterCool webmaster products.Contact us.   Log in to the webmaster's member area.
About This Tutorial
This is one of dozens and dozens of tutorials in the Webmaster section of the member-only area.

The tutorials can walk someone new to web design through the entire process of creating a web site. For experienced webmasters, you'll be able to jump right into specific tutorials in areas where you'd like to learn more.

All the tutorials are well-written, and technical jargon is kept to a minimum. Colored text, images, and other visual aids where appropriate help making learning easy, and bits of humor here and there help make learning fun.

Aligning an Image
The HTML way of aligning an image with the align attribute and value (align="right") has been deprecated and should not be used on newly created pages. Using CSS to “float” an image is the recommended way to align an image now.

Floating an image is usually done using inline CSS because a person wouldn’t normally want all their images floating or all their images floating to the same side; or it’s done by creating two classes for images, one that floats an image left and one that floats an image right. Since I used inline CSS to float an image in the Floats tutorial, I’ll create two classes for floating images in this tutorial, one to float an image left and one right for an embedded or external style sheet.

img.left {float: left;}
img.right {float: right;}

With that in my external or embedded style sheet, if I want to float an image left I just need to add the left class to my image. Here's how:

<img src="tree.jpg" class="left" />
To have the image float right, just change the word left to right in the code. I left out the image width and height and the alt tag to keep the code short and sweet, but you should always include them.

Sometimes we want the text to flow beside an image for a time, but want it to stop and drop below the image at some point. This was covered in another tutorial, but let’s run over it one more time to make sure there are enough tire marks on it.

Stopping the text from flowing beside a floated image is done with the clear property. The clear property can be added to any block level element such as break tag, a horizontal rule, a division element, span element and others. Here’s how to add a clear:

<br style="clear: right;" />
The possible values for the clear property are:

none | left | right | both

Boo! The graphic to the right shows three page layouts. The brown blocks represent text and the orange block represents an image.

The first page, labeled “Original Layout,” shows what happens to the flow of content when an image is not floated. One line of text flows beside the image then the rest of the text drops below the image.

The second layout, labeled “Floated Image,” shows how floating the image to the right allows the text to flow beside the image. The page seems shorter because there is no “blank space” beside the image. If the image were floated left the text would flow beside the image on the right side.

The third layout, labeled “Float Cleared,” shows how the page would look after adding a <br style="clear: right"> tag before the text naturally flows beyond the image. You can see how the text stops flowing beside the image and drops beneath it. You might want to use this when the text describes the image, and drop the text under the image when the description ends and a new train of thought begins. Another use could be to keep a disclaimer or page footer from shifting up beside an image at the bottom of a page.

As I glanced out my window thinking of how I might close this tutorial I watched a squirrel climbing up one of the trees in my yard. It reminded me of you.

As a member, you'd have access to dozens and dozens of quality tutorials like this one. You can hunt and hunt the web for good tutorials, or you can just come here and learn all about web design in one place.

Back