3

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...

EM Em
  • 270
  • 1
  • 3
  • 17
  • Can you explain better what is the expected result? – Alvaro Silvino Feb 13 '16 at 13:07
  • when you look at my fiddle you can see the red background starts "behind" the img; I want it to start like the p-element below does (with a margin of 1em left to the image) and let the red background end at the full-right, like the p-element does as well. Preferably without changing the html. – EM Em Feb 13 '16 at 13:10
  • 1
    have you tried `overflow:hidden;` on **h1**? – Alvaro Silvino Feb 13 '16 at 13:11

2 Answers2

2

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

h1 { background:red; overflow:hidden;}

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

Alvaro Silvino
  • 9,441
  • 12
  • 52
  • 80
1

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

https://jsfiddle.net/tz8fs40x/

h1 { background:red; display:inline; }
Adrian P.
  • 176
  • 2
  • 6
  • Thanks for your answer Adrian! And yes, I did...but I want the h1-element to have the "full widht" to the right; this way it "stops" at the end. – EM Em Feb 13 '16 at 12:47