2 floating divs on top of 2 centered divs - css

Question

I'm trying to create something that will allow me to put something on top of images in this case, small images.
basically, it goes like this and both main divs are centered:
http://jsmith.elementfx.com/images/questions.png
tia.
Sorry, here is
HTML
<div id="container">
<div id="left"><img src="" width="130" height="130" style="border:2px solid #72d6fe" /></div>
<div id="leftimage"><h2>963</h2></div>
<div id="right"><img src="" width="130" height="130" style="border:2px solid #72d6fe" /></div>
<div id="rightimage"><h2>434</h2></div>
</div>
CSS
#container{
margin:0px auto;
width:320px;
text-align:center;
margin-bottom:20px;
}
#left {
float:left;
margin-left:15px;
margin-right:20px;
position:relative;
}
#leftimage{
position:absolute;
padding-top:2px;
margin-left:5px;
width:65px;
}
#right {
margin-right:15px;
}
#rightimage{
position:absolute;
padding-top:2px;
width:65px;
}

Answer 1

you have to use z-index and position to acheive it,
DEMO
HTML
<div id="container">
<div id="left"><img src="" width="130" height="130" style="border:2px solid #72d6fe" /></div>
<div id="leftimage"><h2>963</h2></div>
<div id="right"><div id="rightimage"><h2>434</h2></div><img src="" width="130" height="130" style="border:2px solid #72d6fe" /></div>
</div>
CSS
#container{
margin:0px auto;
width:320px;
text-align:center;
margin-bottom:20px;
}
#left {
float:left;
margin-left:15px;
margin-right:20px;
position:relative;
}
#leftimage{
position:absolute;
padding-top:2px;
margin-left:5px;
width:65px;
z-index:1;
}
#right {
position:relative;
margin-right:15px;
}
#rightimage{
margin-left:175px;
position:absolute;
z-index:1000;
}

Answer 2

use this code, the calculation of the width and height of images would be according to your images:
HTML
<div class="container">
<div class="img1">
<img src="https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/128/test_tube.png" width="32" height="32" />
</div>
<div class="img2">
<img src="https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/128/test_tube.png" width="32" height="32" />
</div>
</div>
CSS
.container{
width:270px;
margin:0 auto;
overflow:hidden;
}
.img1,.img2{
width:128px;
height:128px;
background:url(https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/128/test_tube.png);
float:left;
margin-right:10px;
border:1px solid #000;
}
.img2{margin:0;}
DEMO jsfiddle for this

Answer 3

Demo Fiddle - Quad view with 3 layered images
<div class="container start">
<img src="http://www.placehold.it/300/555555"></img>
<div id="base1" class="base">
<img src="http://www.placehold.it/200/654321"></img>
<div id="overlay1" class="overlay">
<img src="http://www.placehold.it/100/123456"></img>
</div>
</div>
</div>
.base {
width: 200px;
height: 200px;
position: relative;
top: -290px;
left: 10px;
}
.overlay {
width:100px;
height:100px;
position: relative;
left: 10px;
top: -190px;
}
.container {
left:100px;
width: 300px;
height: 300px;
margin: 10px;
float: left;
}
.start {
clear: left;
}