Block element's background image goes behind float element

Question

I have a slight problem with a background image on a block element that is preceded by a floating element.

I float an image to the left, followed by a H1. As expected, the H1 (which is a blocl-level element) flows behind the image, but it's contents (the actual title) appear to the right of the image.

Unfortunately, the background-image I'm using on the H1 has to be aligned to the left, and thus appears behind the actual img, because unlike the contents this is not pushed by the floating behaviour.

Example:

http://jsfiddle.net/WwuqG/

(I set the second title to clear: left to show what it should look like).

One solution is to set the left-margin of the title to a little more than the floating image's width, but that would require me to know it's width beforehand.

Another option is adding the title's icon in an element inside the h1, but that's not semantically correct.

Is there a better css-only solution that doesn't require additional elements?

Answer 1

add overflow:hidden to the h1

new fiddle

Answer 2

I'm slightly confused.

If I do what you suggested:

set the left-margin of the title to a little more than the floating image's width

It looks like this: http://jsfiddle.net/WwuqG/1/

My confusion comes from the fact that your problem seems to be.. really simple to fix.

• Also add float: left to the <h1>: http://jsfiddle.net/WwuqG/2/

This works with whatever width image: http://jsfiddle.net/WwuqG/3/

Is that it, or have I misunderstood?