Arnau Silvestre Dulcet Arnau Silvestre Dulcet - 5 months ago 62
HTML Question

How to make 2 divs responsive with Position Absolute?

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

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>

Comments