Image/Text Alignment

To place an image 150×150 on the left, with text beneath, left hand side:

1) resize your nov06/cover.jpg to 150×150. Its currently 450×300 (54kb). Most free graphics editors will let you do this. Upload to your image files.

2) Go to Your Post and insert this:

<img src="http://yourdomain.com/path to your images folder/nov06/cover.jpg" class="alignleft" />

3) In your style sheet insert this:

.alignleft {
width:150px;
border:none;
height:150px;
text-align:left;
margin:0 0 0 5px;
padding:0;
clear:all;
}

To ensure that your images don’t produce a border when used with hyperlinks:

img a {border:none;}

Note: margin:0 0 0 5px; forces the image 5px from the left so that its not squashed up against your left hand margin.

If you want the image on the left, and the text to start on the right and then ‘wrap’ around the image when the text runs past the bottom image margin, insert float:left; in your styling.

I’d also add <br clear="left" /> straight after my html just to be sure to clear all floating elements.

Put it wherever you want in the stylesheet, but it makes sense to put it with all image coding for ease of modifying, if necessary. Give it a header so you can locate it easily.

/**IMAGES
***********/
.alignleft {
width:150px;
border:none;
height:150px;
text-align:left;
margin:0 0 0 5px;
padding:0;
clear:all;
}

img a {border:none;}

A: yes, but you really won’t need to generate new code in the stylesheet for it. Just stipulate your image size in the img HTML like so

ie: <img src="yourdomain.com/path-to-image" width=300px" height="300px" border="0" alt="description of image" />

Don’t forget a ‘space’ and backslash to close the image tag.