« Mmmm Yarn | Main | trackback »

09.11.2003 :: rootbeer float?

Curious about how the text in my entries wraps around my photos? This is accomplished by adding a few styles to your style-sheet and then applying the class to the image tag in your post.

I use one of two classes for my photos:
.floatleft {float: left;
margin: 5px 8px 5px 0px;}

.floatright {float: right;
margin: 5px 0px 5px 8px;}

When you add class="floatleft" to your <img> tag, the text will float around your image to the right, while the image floats to the left. Floatright works the same way, but the image floats to the right and the text flows around the left side of the image.

your image tag would look something like this:
<img="myfavoritephoto.gif" alt="neato" width="20" height="20" class="floatleft">

css float tutorial at big baer

Posted by Mary on 09.11.2003 AT 10:23 PM

Comments

I know this entry is older than dirt in blog therms, but I wanted to tank you for this - I've been using some CSS to style my photos, but hadn't really put all of the pieces together to use the float technique as well. Thanks!

Posted by: Donna on 02.02.2004 AT 10:34 AM