Question

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>

Answer 1

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.