No replies
gyzhor's picture
Last seen: 3 years 7 weeks ago
Timezone: GMT-7
Joined: 2012-03-06
Posts: 1
Points: 2

I'm inserting a div into a page that can be populated by any number of images of various sizes, so I've been setting the width to auto.
I'm also including a child div to this image div to contain caption text, but I'm finding that if the text is actually longer than the image is wide, the text will expand the parent div to its full length without wrapping.
This becomes an issue, especially since I want text outside of the divs to wrap around the image div.

Is there some way to define the width of a child div based on the content of the parent when both child and parent divs widths are defined as auto?

Here's a jsfiddle of a simplified example of what I'm talking about:

One option I've seen is to make the parent div position: relative, while making the child div position: absolute, but of course this causes the text in the child div to be superimposed over the outside text. There might be some way to extend the parent's bottom padding over the child, but it might be tricky to grow that padding based on how many lines the child wraps before the divs are even written to the page.

I dunno, thoughts?