When I overlap images using relative positioning, the amount of space allocated on the browser page for the images is the same as if the images weren't overlapped.
For example, I can display 5 images of playing cards, each image being 35 pixels wide. Using relative positioning to overlap the card images in a "fan", the way a person would hold playing cards in their hand, results in the 5 overlapped images taking up approximately 55 pixels in visible space. However, the amount of space taken up by the group of images in the browser is the entire 175 pixels, as if I wasn't overlapping the images.
I observed this by putting the images in a div and setting the div's background color to blue. I get overlapped images which look great, and an empty blue area to the right of the images where the extra space is being allocated. I can't put anything in the empty blue area, the browser seems to be setting that space aside for the full width of the images.
The main reason I'm overlapping the images is to conserve space, but the browser's allocation of full space for all the images is defeating my purpose. Is there a solution for this in CSS?
