Forum Moderators: not2easy
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
[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