CSS - Different margin on image depending on the amount of text

Question

I have got a container div (displayed as the blue line) which has a set width and a variable height depending on the content inside. The div can contain text and an image. The text is always floated left and the image is always floated right. The image has a margin of 2px to each side, except the left side (which is near the text).

If the text won't fit next to the image, I want it to wrap around the image, but also with a margin of 10px. Is this possible, so that when the text isn't long enough the margin stays at 2px at the bottom of the image?

Answer 1

This is the default behaviour, due to the float being removed from normal flow. The floating image (and its margins) will overflow the containing paragraph by default.

Demo at: http://jsfiddle.net/m937Q/

The css I tested with:

p {
    width: 300px;
    background-color: wheat;
}
p img {
    float: right;
    margin-bottom: 10px;
}

Note:

If your div has a new block formatting context (will happen if it is floated or overflow: hidden; among other things) it will contain its floats and margins: http://jsfiddle.net/m937Q/2/