Forum Moderators: not2easy

Message Too Old, No Replies

Force captions inside a div with img to wrap?

How to force text to wrap inside a div w/o setting the div's width

         

d_mot

10:00 pm on Mar 2, 2006 (gmt 0)

10+ Year Member



Hi all --

Ive muddled with this for several hours, and need someone with a bit sharper css skillz to take a peek.

Im trying to place p text (a caption) underneath an img, inside a div. I simply want the caption to wrap to the width of the img as below.


+-----------------------+
¦·······················¦
¦········IMAGE··········¦
¦·······················¦
¦·······················¦
¦·······················¦
¦·······················¦
¦·······················¦
+-----------------------+
This caption text should
wrap like this, instead
of extending off to the
right of the image above.

This shouldn't be that tough, but it has tied me up for over 4 hours. The actual width of the images is always unknown, and will always vary. So it seems I can't set the "width" property of the "image" class.

I have this html structure on a page:


<div id='fixed_width_container'>
..<div class='image imgright'>
....<img src='yadda.jpg'>
....<p class="caption">This caption text should wrap like this, instead of extending off to the right of the image above</p>
..</div>
</div>

and I have the following css:


.image {
/*width: 25%;*/
/*border: thin silver solid;*/
/*margin: 0.5em;*/
/*padding: 0.5em;*/
}


.image .caption {
color: black;
text-align: center;
font-size: smaller;
text-indent: 0;
}


.imgright {float :right;}
.imgleft {float :left;}

I must be overlooking something very simple & basic. Has anyone done something similar and point me in the right direction?

Thanks
D

d_mot

4:10 am on Mar 3, 2006 (gmt 0)

10+ Year Member



I found this post which is a close enough solution for what Im after:

[webmasterworld.com...]

Thanks to Suzy for the original thread tip to use an inline style to set the width of the container div on the fly.

I.e. -- I just have to alter the html on page *from* this:
....<div class='image imgright'>

*to* this instead:
....<div class='image imgright' style='width: XXXpx;'>

Where XXX = width of the img. And the caption will now wrap inside a floating div just fine.

D