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