Issues mixing position:absolute with responsive layout - css

Question

I'm not entirely sure what I'm after is possible but at present I have an unordered list when in desktop mode will use display: inline-block to display two images horizontally. However when in tablet/portrait mode, display switches to block to make the unordered list display vertically in the usual manner.
However complicating matters, I have two small background images which I want to overlay over each of the main images. I have used absolute positioning to achieve this however when switching to portrait form (width < 750px), the second main image overlays over the first.
Presumably this is due primarily due to the move away from display: inline-block and the continued use of relative/absolute positioning for the main background image and small background images respectively.
I have remedied this to an extent by giving each li element a specific height (500px), however the intention is that the two lis stick together, when by using a fixed height a gap eventually appears (owing to each li having a width of 100% (so regardless of tablet/phone size, the image will fill the container)).
My first thought was that height: 100% would be suitable but this simply results in the second li overlaying the first.
You can see what I am intending in the below Codepen link if my garbled text is unclear (highly likely). Any guidance on ensuring that the two li elements remain together would be gratefully received. Even if it is to say that the intended effect is not possible! There's also a brief diagram below.
http://codepen.io/grabeh/pen/uInrk
HTML:
<ul class="photo-list">
<li>
<div class="image-holder">
<img src="http://lorempixel.com/500/500"/>
<span><a class="flickr-link"></a></span>
<span class="upvote"></span>
</div>
</li>
<li>
<div class="image-holder">
<img src="http://lorempixel.com/500/501"/>
<span><a class="flickr-link"></a></span>
<span class="upvote"></span>
</div>
</li>
</ul>
CSS:
.photo-list {
list-style: none;
padding: 0;
margin: 0;
}
.photo-list li {
margin: 10px 10px 10px 0;
display:inline-block;
width: 48%;
}
.photo-list li:last-of-type {
margin: 10px 0 10px 0;
}
img {
border: none;
width: 100%;
}
.flickr-link {
background-image: url('http://lorempixel.com/40/40/');
background-repeat:no-repeat;
width: 40px;
height: 40px;
float: left;
z-index: 100;
position: absolute;
}
.image-holder {
position: relative;
}
.image-holder img {
position: absolute;
}
.upvote {
background-image: url('http://lorempixel.com/40/40/');
background-repeat:no-repeat;
width: 40px;
height: 40px;
float: left;
z-index: 100;
position: absolute;
margin-left: 50px;
}
#media handheld, only screen and (max-width: 750px) {
.photo-list li {
display: block;
width: 100%;
height: 500px;
}
}

Answer 1

http://jsfiddle.net/xdXv2/
Your main image doesn't have to be absolute positioned. Only the smaller images do since they have to sit on top of it. Putting your main image back into the document flow will give your list items height again, which means you no longer need to give them a fixed height.
.flickr-link {
background-image: url('http://lorempixel.com/40/40/');
background-repeat:no-repeat;
width: 40px;
height: 40px;
float: left;
z-index: 100;
top:0; /*added this*/
position: absolute;
}
.image-holder {
position: relative;
}
.image-holder img {
/*removed absolute position here*/
}
.upvote {
background-image: url('http://lorempixel.com/40/40/');
background-repeat:no-repeat;
width: 40px;
height: 40px;
float: left;
z-index: 100;
position: absolute;
margin-left: 50px;
top:0; /*added this*/
}
#media handheld, only screen and (max-width: 750px) {
.photo-list li {
display: block;
width: 100%;
/*removed fixed height here*/
}
}