3 replies [Last post]
gsoper
Offline
newbie
Last seen: 13 years 6 weeks ago
Joined: 2003-12-17
Posts: 5
Points: 0

I'm trying to get some text to lie to the right of an image. If the text is deeper than the image I want the text to continue with its left margin following the line projected down from the right of the image, not to flow underneath the image as with a float:left. I've achieved this with a table at http://alphaworks.co.uk/imagetest/test.html (top and middle image / text pairs) where I've also attempted to achieve it with CSS (bottom image / text pair) but failed miserably. As the content is dynamically generated I'd rather not need to know the width of the image at the CSS level. Can somebody point me in the right direction please?

Many thanks,
Geoff

markaxsysdesign
markaxsysdesign's picture
Offline
Regular
Toccoa, Georgia
Last seen: 16 years 46 weeks ago
Toccoa, Georgia
Joined: 2004-01-09
Posts: 42
Points: 0

Arranging text to float alongside an image

Just set the margin-left of the text to equal the images width (plus whatever space you need between the image and text). As far as being done dynamically you would have to have the images in a database with the width of margin-left being a variable depending on the image.

<img scr="" style="float:left">
<div style="margin-left: (image width + whatever spacing desired)"> "text" </div>

Thats all there is to it Smile

http//mark.axsysdesign.com

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 2 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Arranging text to float alongside an image

Or place the text in its own floating div next to the floating image.

Regards
Day

The only way to learn is to do it yourself

gsoper
Offline
newbie
Last seen: 13 years 6 weeks ago
Joined: 2003-12-17
Posts: 5
Points: 0

Arranging text to float alongside an image

Great, thanks for those tips. I found I needed to apply clear:left to the next container else it'll float into any gap undrneath the text, even if that was to the right of the previous image. See http://alphaworks.co.uk/imagetest/sol.html for my implementation.

Thanks,
Geoff