How to make 2 divs responsive with Position Absolute? - css

Question

I got the following structure
<div class="container">
<div class="html5">
<h3>HTML5</h3>
</div>
<div class="pc"></div>
</div>
And the CSS
.pc {
position: absolute;
top: 81%;
left: 38%;
width: 321px;
height: 240px;
background-image: url('images/pc.png');
background-size: cover;
}
.html5 {
width: 321px;
height: 240px;
background-image: url('images/1.png');
background-size: cover;
position: absolute;
top: 44%;
left: 27%;
}
I want to put my .html5 positined in a certain point to .pc, is there any way to make it responsive so when resizing the web page I can still maintain it in the same distance to the other div?
I'm using bootstrap, don't know if there is any trick with one of his classes.JSFiddle

Answer 1

I don't think you can't with the current structure. I'd suggest something like this, and position .html5 relative to .pc.
.pc {
position: absolute;
...
}
.html5 {
position: relative;
...
}
<div class="container">
<div class="pc">
<div class="html5">
<h3>HTML5</h3>
</div>
</div>
</div>

Answer 2

Hi here is the initial solution, but if you are working with bootstrap then you need to add it's library and some pre-defined classes. Another option to make it responsive is using media query.
.pc {
width: 321px;
height: 240px;
background-image: url('http://cremc.ponce.inter.edu/carpetamagica/cuadradoquisosercirculo_files/image001.gif');
background-size: cover;
float:left;
margin-left:10%;
margin-top:10%;
}
.html5 {
width: 321px;
height: 240px;
background-image: url('http://2.bp.blogspot.com/-fId_0wMCKhg/Tz8dxylpK2I/AAAAAAAAJCE/7gF4evDn5zo/s1600/que%2Bes%2Bun%2Btriangulo.jpg');
background-size: cover;
float:left;
margin-left:10%;
margin-top:10%;
}