<span> containing 3 overlapping images has 3x the necessary width

Posted by Nathan Parrish on Stack Overflow See other posts from Stack Overflow or by Nathan Parrish
Published on 2010-05-12T23:05:34Z Indexed on 2010/05/12 23:14 UTC
Read the original article Hit count: 174

Filed under:
|

Hi guys,

I have a element, containing three overlapping images. Inspecting the element in Chrome shows this:

<span id=?"span1">?
   <img id=?"img1" src=?"images/?progressbar.gif" width=?"120" style=?"position:? relative;? z-index:? 3;?">?
   <img id=?"img2" src=?"images/?progressbar.gif" style=?"width:? 120px;? height:? 12px;?? position:? relative;? left:? -120px;? z-index:? 2;?">?
   <img id=?"img3" src=?"images/?progressbar.gif" style=?"width:? 120px;? height:? 12px;? position:? relative;? left:? -240px;? z-index:? 1;?">?
</span>?

The important point is that the second two images are given a relative position, shifting them to the left so they perfectly overlap the first. But the span itself is still 360 pixels wide (3 x 120 pixels per image). So how can I achieve this effect while keeping the span width tightly bounded around the images?

Thanks!

© Stack Overflow or respective owner

Related posts about html

Related posts about css-positioning