Home/ Questions/Q 7005321
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T21:20:09+00:00

I have something like the following code: <div style=border:2px black solid;overflow:hidden;> <span style=float:right;> <img

  • 0

I have something like the following code:

<div style="border:2px black solid;overflow:hidden;">
    <span style="float:right;">
        <img src="sprintlogo.png" alt="Test Image 1" />
    </span>
    <img src="sprintlogo.png" alt="Test Image 2" style="float:left;" />
    <p>Test Text</p>
</div>

For some reason, the bottom border around the <div> is not flush with the images, etc. For example, we get things like this:

Example

It’s not an issue with the images or anything (i.e. there is no whitespace in the image file).

By adding background-color:blue; to the <span>‘s style attribute, we can see that the span seems to be taking up extra space.

Example 2

I tried messing with the span’s margin and padding to no avail. Does anyone have an idea of what is going on?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Very strange indeed.

    I found that by removing the span and simply floating the image right it removes the extraspace. Indicating the issue was in the span.

    Then I looked at firebug and found that the extra space was rendered height.

    Apparently the space is being creating by a stray character (which is odd because the character is still there if you remove whitespace…), as demonstrated here where I turn font-size to 0 and the space goes away.

    Edit

    Yeah the issue is most definitely that the image is being positioned assuming there is text and aligning it with the imagarinary text (veritcal-align:baseline;) another fix would be to align the image with the bottom of this text here.

    • 0