Infektia.net

If you’re not a newbie, you can quit reading now, cause you already know this ;)

While surfing around Blogging with Desi Baba, I suddenly stumbled on a post called How to Wrap Words Around Images in Blog Posts where he explains how to add an image to a blog post and then how to get the image to wrap around it. So far so good. But the method he is using is horrible!

<table align="left"><tr><td> <IMG SRC="Image URL"> </td></tr></table>

Tables are nowadays a no-no! So let me give you a few examples on how to do it properly. We can use the simple way first;

The non-CSS way

- Adding the attribute align. When set to left the image will be positioned to the left, and set to right it will be placed to the right. Pretty obvious, right? :P

<img src="yourimage.gif" align="left" alt="Image" />

The CSS way

- If you want to make it look prettier (especially if you want it to be some space between the text and the image) you can use some simple CSS. This is what I use for this site:

img.left{ float:left; margin:0 5px 0 0; border:1px solid #AAA}

The float: where the image should be placed, margin: how much space you want around it (the first number is top, second - right side, third - bottom and the fourth - left side) and border: how thick you want the border to be, what it should look like and what color you want it to be in. You can create as many styles as you want (right and left are always useful).

So when ever you want to use it on an image, you have to add the class-attribute and add the name of the class (that you wrote in the CSS after img.) as the value:

<img src="yourimage.gif" class="left" alt="Image" />

Any questions? ^^