I have images and captions, and I would like the captions to be no wider than the images. This jsfiddle shows a working example.
The main trick here
div.img{ overflow:hidden; width:1px; display:table; }
It seems that display:table; causes the div to stretch to the width of the image, although the width was specified as 1px. I use this because the width of the image changes and may stretch depending on the width of the viewport.
So far so good. However, the trick does not work on the local page. div actually displayed as 1px wide. Oddly enough, the (apparently) comparable div does show the correct behavior. I am not sure how to demonstrate the problem page because it is a local page with quite html / css and images ... I will be more than happy to come up with screenshots or (ton) of css, if possible help debugging.
I do not immediately see the differences between the functioning and the inoperability of the div in the Firefox console. Does anyone know what to look at?
source share