Div Image and Caption Problem

[Abysinian]

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.

[AtomicPages]

What is <div id="imgCaption"> inheriting as its width?

What you have is the following: <img src="/images/java/Cubes.jpg" width="364" height="345" alt="Cubes" />

This means that the width of the image named Cubes.jpg is 364px. This attribute only applies to the image itself and not the container.

If you wish for <div id="imgCaption"> (which should really be a class selector and not an ID selector) to be a certain width then you need to specify that in your css.

So here's what you have:

#imgHolderLeft {float:left;}
 
#imgHolderRight {float:right;}
 
#imgCaption {
	width:inherit;
	text-align:center;
	font-style:italic;
}

All of these should be class selectors and not id if you intended to use them more than once per page.

<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>

HTML looks great!

For all floated elements you must have a width applied to it. (This can also be inherited) Somewhere in your css you have defined a width and the image is floating left/right (depending on the selector you chose) and it's working correctly.
http://www.w3.org/TR/CSS2/visuren.html#floats

What you have in this image is correct. Your css and html are doing what you created them to do.

Perhaps you can post the url of the site where we can see the outlining css so we can assist you with this. It's hard to come up with a solution with only three selectors and a few lines of HTML. But I'm confident we can find a solution for you :)

[drjohn]

divs don't really inherit a width - they are all 100% wide unless you state otherwise. Okay, 100% of the width of their parent container, so it's sort of inheritance.

You should give your div a width that suits the image size you intend to use. Eg image is 350px wide, make div 360px and add padding of 5px, then a 1px border, to make it prettier.

Also float left or right can't work with a div UNLESS the div has a width - how can something that is 100% wide be moved to the left or right, it must always be touching the left and the right because it is filling all available space.

If you gave you div a background color or a border, you'd see it's true size and understand why you long captions just keep going on and on. This is also useful when other things go wrong as well.

EDIT when I scrolled down, I must have jumped past the post above, which says much the same thing.

[Abysinian]

What is <div id="imgCaption"> inheriting as its width?

What you have is the following: <img src="/images/java/Cubes.jpg" width="364" height="345" alt="Cubes" />

This means that the width of the image named Cubes.jpg is 364px. This attribute only applies to the image itself and not the container.

If you wish for <div id="imgCaption"> (which should really be a class selector and not an ID selector) to be a certain width then you need to specify that in your css.

So here's what you have:

#imgHolderLeft {float:left;}
 
#imgHolderRight {float:right;}
 
#imgCaption {
	width:inherit;
	text-align:center;
	font-style:italic;
}

All of these should be class selectors and not id if you intended to use them more than once per page.

<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>

HTML looks great!

For all floated elements you must have a width applied to it. (This can also be inherited) Somewhere in your css you have defined a width and the image is floating left/right (depending on the selector you chose) and it's working correctly.
http://www.w3.org/TR/CSS2/visuren.html#floats

What you have in this image is correct. Your css and html are doing what you created them to do.

Perhaps you can post the url of the site where we can see the outlining css so we can assist you with this. It's hard to come up with a solution with only three selectors and a few lines of HTML. But I'm confident we can find a solution for you :)

I set the width to inherit for the div imgCaption because I thought that automatically set it to the width of the parent div (imgHolderLeft). I wasn't aware that they were automatically set to 100% width.

I can't set the width of the imgHolderLeft or Right to a specific size because the images inside them will all be different sizes, meaning i'd have to make new ones for every image (would I be correct in saying this?).

I wasn't aware of what you said about floating, i'll have a look at that, thanks.

The url to the page which is having this problem is http://www.andy-d.net/java.html
There you will see images that are longer than their captions, which looks fine, then the ones that are smaller than their captions making them look strange.

Cheers,

Andy.