Forum Moderators: not2easy
For example, I can display 5 images of playing cards, each image being approx. 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 group of 5 overlapped images taking up approximately 55 pixels in visible space. However, the amount of space allocated by the browser for the group of images appears to be the entire 175 pixels, as if the images weren't overlapped.
I observed this by putting the images in a div and setting the div's background color to contrast. I get overlapped images which look great, and an empty colored area to the right of the images where the extra space is being allocated. I can't put anything in the empty area, the browser seems to be setting that space aside for the full width of the images.
This happens in IE, Firefox, Opera, and Safari (for Windows).
Here's a code snippet.
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
.
.
.
<style type="text/css">
#playerDisplay {
background-color: #20e010;
position: absolute;
margin-left: 35%;
margin-top: 45%;
}
</style>
.
.
.
<div id="playerDisplay">
<div style="background-color: #a9e9f9;">
<img src="image?id=s1" style="position: relative; left: -0px;"/>
<img src="image?id=s2" style="position: relative; left: -55px"/>
<img src="image?id=s3" style="position: relative; left: -110px"/>
<img src="image?id=s4" style="position: relative; left: -165px"/>
<img src="image?id=s5" style="position: relative; left: -220px"/>
</div>
</div>
</code>
The images are returned from the server via a call to a Java servlet and subsequent binary stream of each image back to the web page. I'm hardcoding the number of pixels used for relative positioning for now, this will be handled dynamically later.
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?
As you discovered, relative positioning "nudges" elements, but the space they occupied in the flow before remains the same for positioning of the other elements. This is the expected behavior.
I think one of the many solutions is to put the images each in a container, make sure overflow is hidden and make the containers narrower than the image, that way you don't need to use relative positioning.
Another is to absolutely position the images so they take up no space at all.
I'm sure there are a lot more options as well.
Alternatively, set position:absolute on the images and use left:?px to position them inside the containing div.
