How to float:left a container with an image having a relative width?

Question

I'm trying to align to the left an image with a width which is relative to the page width. There are couple of unfortunate constraints which I cannot change:

• the image has a wrapper,
• I cannot apply width to the wrapper because class responsible for the width is applied to the image (and I cannot change that too :D),
• the solution must be CSS-only.

The structure looks like this:

<p>Lipsum...</p>

<div class="align-left">
    <img src="http://lorempixel.com/1000/1000/" class="width50" alt="lipsum" width="1000" height="1000">
</div>

<p>Lipsum...</p>

CSS:

.align-left {
    float: left;
    background: red;
    padding: 10px;
}

.width50 {
    width: 50%;
    height: auto;
}

See: http://jsfiddle.net/xnt27crz/2/

Question: Is it possible to style the div.align-left in a way that it does not take 100% width? Its width should equal the width of an image + its own padding.

More facts:

• The closest I got was to float the image, not the div (so it is 0px high), but it was awful and caused other issues.
• I think that this can be achieved with flexbox, but I'm looking for IE9+ support.
• I'm looking for a "safe" solution because it will be then used by many developers in many scenarios that I cannot predict.
• Edit: The real case is much more complicated, hence the constraints. You can see the example here: http://jsfiddle.net/n1kayb2o/3/. Note that the structure inside the editor is different than the input HTML. There's additional wrapper which glues together the figure and the drag handle that it has and some other elements that may be needed (e.g. an overlay).

Answer 1

Tough problem. I had to read the spec to help you out and here is my result.

It's impossible to solve the problem with the given constraints since it all depends on the width of the image (also called "replaced element")

Why?

Let's read the spec http://www.w3.org/TR/CSS2/visudet.html#float-width

If 'margin-left', or 'margin-right' are computed as 'auto', their used value is '0'.

If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.

Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, find the available width: in this case, this is the width of the containing block minus the used values of 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.

Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).

Lets do the "math" for your case

Preferred minimum width = 1000px (real width of the image)
Available width = assume 1990 (roughly page width)
Preferred width = 1000px (real width of the image)

min(max(1000, 1990), 1000) = 1000

As a proof http://jsfiddle.net/xnt27crz/5/ with 200px image

Summary

In your case the floated div will get the width equal to the real width of the image.

Answer 2

Question: Is it possible to style the div.align-left in a way that it does not take 100% width? Its width should equal the width of an image + its own padding.

This is an example https://jsfiddle.net/n1kayb2o/5/

But if you want it more responsive, that max-width of the container (figure) will not exceed it's container - then it could be much more complicated. Especially if you want your class image30 to have for example 30% of it's container even if image inside it is more wider.