Hey,
I'm doing a lot of work on my website, and changing from tables to divs for holding my images.
At the moment, this is the code i'm using for the divs for my images in my CSS file:
#imgHolderLeft
{
float:left;
}
#imgHolderRight
{
float:right;
}
#imgCaption
{
width:inherit;
text-align:center;
font-style:italic;
}
Now, the problem is, when the caption is longer than the picture is wide, it doesn't wrap, it just carries on, and so it looks pretty dodgy:
<div id="imgHolderLeft">
<img src="/images/java/Cubes.jpg" width="364" height="345" alt="Cubes" />
<div id="imgCaption"><p>All cube dimensions are taken in and their volumes calculated. Finally the total volume of the cubes added together is calculated and displayed.</p></div>
</div>
As you can see here, the image is only 364px wide, but the caption is far longer than that. In my CSS I've set the width of the imgCaption div to inherit its width, which should come from the div it's inside (imgHolderLeft) but its isn't doing this.
And I know I could just set the width of the imgHolderLeft and Right to the size of the image, but then i've got a lot of images on my website, I can't make a seperate div for every image that is a different size.
This gives a good representation of what I mean:
[IMG]http://imgur.com/JzkWn.jpg[/IMG]
You can see in this that the image at the top is fine because the caption is shorter than the image is wide, but the bottom image is the troublesome one.
Any help would be much appreciated.
Cheers,
Andy.