Wrapping Text around a Picture

You need to be in code view for the following:

In the head of your document just before the closing </head> tag.  copy and paste the following style rules:

<style type="text/css">

/* floats an image right, so text wraps around it */
.imgright {
    float: right;
    padding: 2px;
    margin-left: 10px;
}

/* floats an image left, so text wraps around it */
.imgleft {
    float: left;
    padding: 2px;
    margin-right: 10px;
    }
</style>

In Design View, select your image.  Look at the tag selector above the Property Inspector and you'll see the <img> tag.

Right click on the tag and select "Class".  You should see two classes.  imgright and imgleft.

Select imgright.  This floats the image to the right.   If you want to have the image on the left, choose the .imgleft class.

The HTML will look like this when the class has been applied to the image.

<img src="79267-org.jpg" alt="" width="113" height="91" class="imgright" />

You can use this as many times as you like on a page because we are using a class rule not an ID (#) which can only be used once per page.

Example can be see here

Go up to Insert | Image, find your image and click OK. A dialog box will pop up asking your to put in your Alt Text, (A description of the image)do that as well.

Now switch to split view, click once on the image in design view, the code in code view will hightlight.  Hit Control X to cut this code out, (thus deleting the image) and place your curser in the text close to where you want the image to be, hit control V to paste the image back in.

Your code will look like this

<img src="images/picturefilename.png" alt="The alt text you already added" />

NOw just like Vinay said, you will add style="float:right;"  to  the above code directly after the png", so it will look like this.

<img src="images/picturefilename.png" style="float:right;"  alt="The alt text you already added" />

You may want to reposition (cut and paste same as above) once you see how it lays out.

Then pat yourself on the back, you just worked with HTML code.

Gary

You do this with CSS floats and margins like so:

http://alt-web.com/DEMOS/CSS2-Captions-on-floated-images.shtml

Please don't use Frames in the HTML sense.  They're terrible to work with and frustrating for site visitors.

http://apptools.com/rants/framesevil.php

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Not sure what your whole page is like but you can float your image to the right and text will automatically wrap on the left.

Just add as following:

<img style="float:right"...>

To learn more you may refer to followiing link also:

http://codex.wordpress.org/Wrapping_Text_Around_Images

Regards,

vinay