Arranging text to float alongside an image

Forum Moderators: not2easy

Message Too Old, No Replies

Arranging text to float alongside an image

gsoper

12:54 am on Jan 11, 2004 (gmt 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 <edit> (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

[edited by: tedster at 5:12 pm (utc) on Jan. 13, 2004]

zollerwagner

8:21 am on Jan 13, 2004 (gmt 0)

Would you be willing to create a single column (maybe just the body?) with a large fixed padding-left for the text? That would limit the size of your images, but they could vary as long as they were smaller than the padding, I think.

Then you would float to the left your images, rather than the text.

You'll find some good ideas in Eric Meyer's book On CSS, and from the Alistapart site.

gsoper

9:13 am on Jan 13, 2004 (gmt 0)

I've found some other nice solutions on other PHP forums, one is making the image float left and then giving the text container a margin bigger than the width of the image. The other was to make the text and image both float:left. In both cases the next container after the pair needed clear:left to be set. You can see these at: <edit>

Thanks,
Geoff

[edited by: tedster at 5:13 pm (utc) on Jan. 13, 2004]

humpingdan

2:20 pm on Jan 13, 2004 (gmt 0)

Just a little something ive used!

<body>
<div id="holder">
<ul>
<li class="thumb">
<a href=http://www.vanillapearl.com>
<img src=image.gif alt="image" border=0></a></li>
<li class="desc">A picture of a stack of books</li>

<li class="thumb"><a href=http://www.vanillapearl.com>
<img src=image.gif alt="image" border=0></a></li>
<li class="desc">A picture of a stack of books</li>

<li class="thumb"><a href=http://www.vanillapearl.com>
<img src=image.gif alt="image" border=0></a></li>
<li class="desc">A picture of a stack of books</li>
</ul>
<br>
<ul>
<li class="thumb"><a href=http://www.vanillapearl.com>
<img src=image.gif alt="image" border=0></a></li>
<li class="desc">A picture of a stack of books</li>

<li class="thumb"><a href=http://www.vanillapearl.com>
<img src=image.gif alt="image" border=0></a></li>
<li class="desc">A picture of a stack of books</li>

<li class="thumb"><a href=http://www.vanillapearl.com>
<img src=image.gif alt="image" border=0></a></li>
<li class="desc">A picture of a stack of books</li>
</ul>