Imgae overlay and responsive design

I have to overlay two images to obtain the fade effect on the page scroll, and this not a problem, it works well. The problem is that if I don't set a height to the .square-banner class, the banners are overlapped by the following ones (second picture). Because the website is responsive I need to eliminate the height to the .square-banner class and I don't have found a solution for this.

<div id="banner-1-1" class="square-banner">
    <img class="img-bottom" id="img-bottom-1" src="images/prodigio-wording.jpg">
    <img class="img-top" id="img-top-1" src="images/prodigio.jpg">
</div>

.square-banner {
  position:relative;
  float:left;
  width:100%;
  height: 430px;
  cursor: pointer;
}

.img-bottom, .img-top {
width: 100%;
height: auto;
display:block;
float:left; 
}

.square-banner img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

Because of the image position:absolute (to have them overlay), the .square-banner doesn't occupy space in height. This is the real problem I have to solve

via Chebli Mohamed