html - auto expand div height not working -


this design code. problem have slider in image sizes have set according screen size. problem content below slider overlapping on slider part. should happen in screen below slider content should come. if specify min-image size when screen size gets reduce leaves lot of blank space.

html code.

<!--slide-part-starts--><div class="slide-part">     <!--slider-starts--><div class="fadein"> <img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerock-13600mah-powerbank.html'" src="bg slideshow/1.jpg"><!--powerock--> <img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerpunch-10500mah-powerbank.html'" src="bg slideshow/2.jpg"><!--powerpunch--> </div><!--slide-ends--> </div><!--slide-part-ends-->  <!--about-evio-starts--><div class="about-evio"> @ evio, make tech gear helps improve productivity,<br /> have more time essential things - living life fullest. </div><!--about-evio-ends--> 

css

.slide-part{     width:100%;     max-width:1600px;     margin:0 auto;     min-height:100px;     height:100% }  .fadein {     position:relative;      width:100%;      max-width:1600px;      margin:0 auto;      min-height:100px;     height:100% }  .fadein img {     position:absolute;      left:0;      top:0;      height:auto;      max-width:100%;      width: auto\9; }  .about-evio{     width:100%;     text-align:center;     padding:50px 0 50px 0;     border-top:1px solid #000;     border-bottom:1px solid #000;     text-align:center;     min-height:20px;     background:#fff;     font-size:1.2em;     line-height:30px } 

check out demo.

you need check out width/height ratio , adjust padding-top specific percentage value image shows nicely.

html:

<!--slide-part-starts--><div class="slide-part"> <!--slider-starts--><div class="fadein"> <img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerock-13600mah-powerbank.html'" src="http://placehold.it/1150x350"><!--powerock--> <img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerpunch-10500mah-powerbank.html'" src="http://placehold.it/1150x350"><!--powerpunch--> </div><!--slide-ends--> </div><!--slide-part-ends-->  <!--about-evio-starts--><div class="about-evio"> @ evio, make tech gear helps improve productivity,<br /> have more time essential things - living life fullest. </div><!--about-evio-ends--> 

css:

.slide-part{     width:100%;     max-width:1600px;     margin:0 auto;     min-height:100px;     height:100% }  .fadein {     padding-top: 27%;     position:relative;      width:100%;      max-width:1600px;      margin:0 auto;      min-height:100px;     height:100% }  .fadein img {     position:absolute;      left:0;      top:0;      bottom:0;     right:0;     height:100%;     width:100%;  }  .about-evio{     width:100%;     text-align:center;     padding:50px 0 50px 0;     border-top:1px solid #000;     border-bottom:1px solid #000;     text-align:center;     min-height:20px;     background:#fff;     font-size:1.2em;     line-height:30px } 

Comments