I have a div and I am adding an image in-line, the problem is

Question

0

Asked: June 17, 20262026-06-17T05:50:06+00:00 2026-06-17T05:50:06+00:00

I have a div and I am adding an image in-line, the problem is

0

I have a div and I am adding an image in-line, the problem is when the image is bigger than the line-height it just increases the line-height instead of having the image go over the text.

Here is my code:

<html>
  <body>
    <div style="height:130px; width:130px;">
      one two three four five 

<img src="http://ladyenews.files.wordpress.com/2011/03/smiley-emoticon.png" style="width: 20px; height: 20px; display:in-line;">

       six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen
    </div>
  </body>
</html>

Example here: http://jsfiddle.net/dWkfq/1/

So how do I get my image to get inserted into my div without the line-height increasing, I need the image to overlap onto the text if it is too big?

I was thinking maybe somehow putting the image in another div with a max-height and then setting the overflow to visible or something but I’m afraid the answer will be much harder and involve absolute positioning with javascript.

I would just absolutely position the image on my own but the text is subject to change so I need a flexible solution.