Home/ Questions/Q 7438647
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T10:35:14+00:00

Evening front end wizards. I’m trying to do something that should be quite simple:

  • 0

Evening front end wizards. I’m trying to do something that should be quite simple: I want to have images floated right or left in my body content, with a caption below each image. To try and achieve this I’m floating a div with the image inside it, followed by a span with a caption below. I’ve given the image max-width 100% so my layout is responsive.

Is there any way using just CSS and HTML that I can constrain the width of the containing div to the width of the image inside it? I’m finding that the span below pushes out the width of the div, whether it’s display:inline-block or not. I’d like the span to always be the same width as the image, so the text wraps in line with the image’s right edge.

I’d like to be able to use images of varying widths, so setting a max-width on the div doesn’t really do the trick. I could do it easily enough with JQuery, but that would be cheating.

Any suggestions gratefully received! You can see what I’m talking about at http://jsfiddle.net/andfinally/yBHjK/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It sounds like you want the containing div to expand it’s width only for img elements and not span elements. Is that correct?

    There is no pure CSS solution for this, JavaScript is the best way to achieve what you’re after.

    Two similar questions:

    • 0