Question

I have an inline image in my div that is inline by using position:absolute (I can’t use other methods for inline because they cause the line-height to change.) These images flow out of the div and are sent to the next line… but the image doesn’t go down.. it is sent to the next line meaning it is sent to the far left of the div but it doesn’t move down in height so it’s almost like it stays on the same line but moves to the left? How can I fix this?

Example: (*Change the width of the last TWO images from 30px to 150px to see the effect I’m describing.) http://jsfiddle.net/ztKP5/2/

---

Code: (*Change the width of the last TWO images from 30px to 150px to see the effect I’m describing.)

<div style="font: 30px; border:1px solid black; width: 350px; height:350px; word-wrap: break-word;">

<font face='helvetica'>

Test test test test test test test test test test test test test test test test!!

<img src='http://home.comcast.net/~urbanjost/images/globe_west_2048.jpg' style='width: 100px; height: 75px; position:absolute;'>
<img src='' style='width:100px; height:2px;'> <!-- this is a spacer-->

<img src='http://home.comcast.net/~urbanjost/images/globe_west_2048.jpg' style='width: 30px; height: 75px; position:absolute;'>
<img src='' style='width:30px; height:2px;'> <!-- this is a spacer-->


</font>

</div>

Answer 1

Wrapping the absolute positioned image in a div that was display:inline-block (… NOT display:inline) fixed the problem.

Add an extra “!” after the “test” text to see here: http://jsfiddle.net/Z9rzx/2/

Or add an extra “!” after the “test” text in the source code below to see the image go to the next line:

<!--The second and fourth images are just spacers so that the next text, or image, or whatever will appear after the absolutely positions image instead of behind it... I could have used an in-line div or a span or anything...-->


<div style="font: 30px; border:1px solid black; width: 350px; height:350px; word-wrap: break-word;">

<font face='helvetica'>

Test test test test test test test test test test test test test test test test!!!!!!!!

<div style="width:100px; display:inline-block;">
  <img src='http://home.comcast.net/~urbanjost/images/globe_west_2048.jpg' style='width: 100px; position:absolute;'>
  <img src='' style='width: 100px; height:2px;'>
</div>

<div style="width:100px; display:inline-block;">
  <img src='http://home.comcast.net/~urbanjost/images/globe_west_2048.jpg' style='width: 100px; position:absolute;'>
  <img src='' style='width: 100px; height:2px;'>
</div>

test tast test test test test test test test test test test


</font>

</div>