将h1对齐浮动图像的右侧

Question

I have the following code:

<div>
    <img class="left" src="http://dummyimage.com/64x64/0088cc/ffffff.gif&amp;text=.img">
    <h1>
    Biografie
    </h1>
    <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
</div>

And this is the CSS I'm using:

img { float:left; width:150px; margin-right:1em; margin-top:5px; }
h1 { background:red; }
p { overflow:hidden;}

I'm struggling on how to get the h1-element getting displayed right from the image regarding the margin-right:1em; (like the p-element does) without using padding-left on the h1-element (because the size of the image varies due to responsiveness, etc.).

Here's a fiddle: https://jsfiddle.net/ukwn43y2/1/

And hint on how to do that?

EDIT: I'm looking for a "pure" css-way without editing the html; adding a container-div for the text-part is possible, but not what I'm looking for...

Answer 1

You can try just hiding the overflow from the image and the h1 :

h1 { background:red; overflow:hidden;}

https://jsfiddle.net/ukwn43y2/5/

Answer 2

Have you tried setting display:inline; on the h1 element?

https://jsfiddle.net/tz8fs40x/

h1 { background:red; display:inline; }