SasQ 0

I have HTML like this one:

<div class="figure">
  <img src="..." alt="..."/>
  <p class="caption">Some caption text</p>

How to make the DIV (float right, with padding and border) shrink-wrap the image and the caption paragraph minimally? When I use only float:right and the caption text is longer than the image width, it stuffs out the border DIV. It doesn't look good, but I don't know how to fix it that the text would wrap automatically and doesn't go further than the image width. Are there any solutions?

  • One more thing: The image width is dynamic - i can't know it's size up-front, because it comes from the CMS. So the frame have to adjust dynamically to any size the image has. I can't set it fixed to any size because I don't know the size. SasQ over 6 years ago
  • A decent CMS would have the image attributes available, so you would be able to programatically access the width. Tony Crockford over 6 years ago

4 answers

SasQ 0
This was chosen as the best answer

Thank you guys for your answers. It looks like no one knows how to do that simple thing, so the fault is in the CSS which doesn't handle with that easily.

For now, I have fallen back to the following solution: I'm setting the width of the DIV container to the same width as the IMG from the CMS scripts in HTML, using style="width:XXXpx;". It uses the fact that width is the inner width of the container, before adding any paddings and borders. A programmer of the CMS core agreed to introduce that "patch" into his code.

But I wish some day CSS will allow for formattings like that automatically, without messing with the underlying HTML structure...

Answered over 6 years ago by SasQ

The following code works with all image sizes. Please note the image cannot be bigger than the container div.

.figure{overflow:hidden; width:300px; padding:5em;}

.figure,.figure img{float:right;}

Answered over 6 years ago by Jeffrey Nolte
danwellman 5600

Not sure there is a pure-css solution tbh. Somthing needs an explicit width could determine the width of the image with JS and set the width of the container accordingly?

Answered over 6 years ago by danwellman
  • I can set the width of an image (which is redundant, because it has inherent width), but unfortunately not the width of the container, because of the paddings which are in em's, not pixels. And CSS AFAIK doesn't let you mix different units and sum them up. SasQ over 6 years ago
  • One way might be to use a CSS processor like SASS to do CSS calculations. Unfortunately, they can't be done "on the fly" as it were, but they can mix units: Nathan DeGruchy over 6 years ago

What I generally do is to fix the width and height of the container and set the image as a background using inline CSS. (which means it can be inserted programatically)

You can then have full control over the layout of the page and no oversized images will break it.

do this:

<div class="figure" style="background-image: url('urltoimage');" title="alt text for image">

  <p class="caption">Some caption text</p>

and set a fixed width and height for div.figure in your main css. If you don't declare background position it will be centrally cropped, you can have a class of portrait for portrait images and top align them so they are cropped at the edges and the bottom.

if you add a lightbox and link to larger images you have the best of all solutions.


Answered over 6 years ago by Tony Crockford
  • Not good idea - not semantic. With CSS off there will be no image visible, no alt-text etc. It's not a "theme" image, but a figure in the content, so it should be marked up a so. Not mentioning that I need to style a HTML which is already made, not by me, but by the CMS. My job is to style it up with CSS. SasQ over 6 years ago
  • Images aren't semantic[1] in the first place, a Machine can't read the image, but it can interpret the caption and the title... If you can't edit the html then you're pretty much out of luck for styling the box, especially if you can't set a width. [1] Tony Crockford over 6 years ago
  • When I speak "semantic" I don't have on my mind only machines, but also "protein beings" ;-) And for them the image *is* semantic - e.g. it's a *figure* in the content. A good screen reader can make it more obvious. Semantic = meaning. And the IMG tag has a meaning defined by W3C. When you use CSS background to insert it's euqlly non-semantic as when you use IMG to insert non-content, presentational images. But it's whole another story... SasQ over 6 years ago
  • I think you're being picky... :) and setting the width on the div is the solution as you have now found, CSS is a presentation layer, and as such needs the structure to be in place to work with. Tony Crockford over 6 years ago