Child DIV resizes Parent DIV

I don't want what the title describes to happen...

[FabianS]

Hi there.

I'm trying to do the following, but it's not working:

I have an image and I want to include a caption with that image. To do that, I have created a parent div, called 'articleImageRDiv', which includes the image, and yet another div, called 'articleCaptionDiv'.

<div class="articleImageRDiv">
<img src="images/articleImages/numenta.jpg" />
<div class="articleCaptionDiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis lacus, vestibulum vitae pellentesque in, suscipit vitae odio. Lorem ipsum dolor sit amet
</div>
</div>

Without the caption, the parent DIV's size (height/width) is good, just the size of the image (I'm using PHP to output dynamic content, so I need it to be like this). However, if I include a caption, and the text is longer than the width of the image, it will expand the parent DIV (articleImageRDiv). Instead, I would like to the text within 'articleCaptionDiv' to wrap around, without expanding the width of the parent DIV.

My styles are as follows:

.articleImageRDiv {
float: right;
margin-top: 10px;
margin-left: 10px;
margin-bottom: 5px;
background-color: #CCC;
border: thin solid #666;
padding: 2px;
}
.articleCaptionDiv {
text-align: center;
}

Thank you.

[FabianS]

Oh, just to add a bit more information (I can't seem to edit my initial post).

The width of the parent DIV (articleImageRDiv) is unknown. I want it to be the width of the image below it (numenta.jpg in this case) but since whatever's inside that DIV is taken from a database (I'm using PHP) I'm reusing this code constantly for different cases.

[SuzyUK]

Hi FabianS and Welcome to WebmasterWorld!

OK, your images are different widths, but whatever they are, you want for the overall parent div to be that width. With any text below it wrapping as necessary at the same width.

Floating the parent, without a width, won't cut it, because a float without a width will "shrinkwrap" its content. You can't tell it just to shrinkwrap the image, it will shrinkwrap all content, therefore if your text is longer it will shrink to its width as you've found.

You could try a max-width on the caption text if there's not a lot of difference in the width of your images, though that's probably not the best solution either, back support may be an issue?

One possibility is if you're up to programming it is to detect the width of the image as it gets pulled from the database and code some extra HTML for "articleImageRDiv" OR "articleCaptionDiv" to have an inline style the same width as that image.

I think there might be another way, I've forgotten, I'll get back to you if I find it..

[SuzyUK]

You know what, the other way is to use the table display properties, but that's too hacky to get x-browser goodness and even then it still doesn't do what an old fashioned table did.

so the best way : Use a table!

<table class="articleImage fr">
<tr><td>
<img src="example.jpg" alt="#" width="170" height="128" />
<p class="caption">True table. Caption can be as long as you like, please test as this method does use the 1px table width trick</p>
</td></tr>
</table>

the CSS:

.fr {float: right;}
.fl {float: left;}

.articleImage {
width: 1px; /* need this trick, the image inside this forces table to stretch, and text then follows it */
margin: 1em 0;
border-collapse: collapse;
}
.articleImage td {
background-color: #fee;
padding: 10px;
border: 2px solid #777;
}

.articleImage img {
border: 1px solid #777;
margin-bottom: 5px;
}

.articleImage .caption {margin: 5px 0; font-size: 12px; line-height: 1.5;}

change the "fr" class depending on the float direction you need.. you can remove all divs and use the proper elements.
oh.. IMHO, if you feel guilty, then don't, all you're doing is substituting generic containers, <div>s, for more specific containers with inherent properties and I think there is probably less code involved, but if you shorten the class names you should definiteley have less code ;)

PS: not tested in all latest browsers so please do, it could be the newer browsers handle the "table trick" differently

[FabianS]

Hey, thanks for the replies guys :)

Don't know why I didn't think of just using a table... :-S Anyways, I just changed the code a bit to get the width of the image and add another style element (width) to the parent DIV. That sorted it out... Although the table method would have been easier :P

Again, thanks! :)