Why is the red box not the same size as the green box? (I have to have the absolute position as I'm overlaying two images)
What am I doing wrong?
<div style="position: relative; float: left; width: 300px; background: red; border: 10px solid red">
<div id="holder" style="position: relative;">
<div style="position: absolute; left: 0px; top: 0px; background: green">
<img src="image" width="100" height="100"></div>
<div style="position: absolute; left: 0px; top: 0px; background: green">
<img src="overlay" width="100" height="100"></div>
</div>
</div>
you need to give the holder div the same height as images have. I assume that you have some specific two overlapping images so you know the size of them.