No line break in html dd-element

Question

I am trying to get the image caption which is a dd-element to break so it is as wide as it's dt-element. I don't want to use a width and using display: inline and float: left do not work. I have code and example here: http://jsfiddle.net/PnyHs/11/. I'm using Firefox 9 to test.

The only solution I can come up with right now is to use javascript to measure the dt-element and set that width to the dd-element.

Thanks in advance for any help and suggestions.

Answer 1

If you want to keep the structure of your HTML and not use max-width, I dare to say this is impossible, and here is why:

You are expecting the img object to constrain the dd element. However both elements are siblings and can only be constrained in terms of width by their parent (alternatively an element can be stretched out by its children). Hence, the dd will expand as much as it wants because the parent element is not limiting it.

Of course this could be solved by setting the width of the parent element, however you've mentioned that you don't want to do that since the pictures will have different sizes.

So unfortunately unless you change your HTML structure this won't be possible without JavaScript (unless I'm missing something obvious here).

Answer 2

Using dl markup for an image and a caption is artificial and doesn’t make styling any easier. The only approach to the problem (making the caption as wide as the image) that does not need scripting or setting image width explicitly seems to be to use a single-cell table with a caption element, see fiddle and my page on image captions. Example:

<table class="photo">
    <caption align="bottom">Image Caption with a very very very very very long    
     text</caption>
    <tr><td>
        <img title="" alt="" src="http://dummyimage.com/120x100/82d91f/fff">
    </td></tr>
</table>  

Answer 3

Can you add a width to your dl element? The same width as your image like this http://jsfiddle.net/PnyHs/12/