Placing <div> on same line as image

Question

I have some HTML that looks like the following: http://jsfiddle.net/KbqHa/

I would like this div to be on the same line as the image. However, it moves to the line below due to the div being a block element. In this case I'd usually use a <span>, but this completely messes up the border (and the div wraps under the image too). Adding display:inline-block to the div doesn't seem to work either. I've tried using float: left but I can't get that to work either. Any thoughts?

Answer 1

The classic solution is to use float: left on the img, and then add a margin-left to the div equal to the width of the image.

See: http://jsfiddle.net/thirtydot/KbqHa/2/

However, that's no good if the width of the image is unknown.

So, a better solution is to use overflow: hidden on the div.

See: http://jsfiddle.net/thirtydot/KbqHa/3/

The reason this seemingly nonsensical solution works is explained here.