Welcome to WebmasterWorld Guest from 54.221.87.97

Forum Moderators: brotherhood of lan & mack

Message Too Old, No Replies

How to place image on left, with text to the right

     

Shapes

10:21 pm on Sep 17, 2007 (gmt 0)

5+ Year Member



I am having difficulty getting my text to locate on the right side of an image. I'm using Dreamweaver CS3 and following the recommended steps to create the new <div> and float the image left. But the text will not budge from sitting below the image. Please help!

Marshall

6:36 am on Sep 18, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi Shapes. Wrapping text is subject to space, and of course, floating the image. The easiest way I find to do it is this:

<div>
<p><img src="whatever" style="float:left" height="y" width="x" /></p><p>text</p>
</div>

Remember, an image is an in-line element where as a <p> is a block element, so just doing:

<div>
<p><img src="whatever" style="float:left" height="y" width="x" /> text</p>
</div>

does not always work. And if you are not using XHTML, delete the forward slash at the end of th eimage tag.

Marshall

whoisgregg

3:12 pm on Oct 31, 2007 (gmt 0)

WebmasterWorld Senior Member whoisgregg is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I find myself floating images on a fairly regular basis, so I set up classes to handle the two most frequent uses:

CSS

.left { float: left; margin: 0 .5em .5em 0; }
.right { float: right; margin: 0 0 .5em .5em; }

HTML

<p><img src="..." class="left" /><img src="..." class="right" /> Example Text</p>
 

Featured Threads

Hot Threads This Week

Hot Threads This Month