DIV容器不占用高度

Question

I have the following CSS which makes images break row after it reaches the end of the DIV but the DIV container behind it is not taking height according to the images. The height should expand along with the images. Here is the screenshot http://prnt.sc/e3fqvr .

CSS:

.image-container {
    width: 163px;
    height: 100px;
    padding: 0px 0px 65px 0px;
    font-size: 12px;
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin-right: 13px;
    display: inline-block;
    float: left;
}

.proof-container {
    width: 100%;
    position: absolute;
}

.container {
    width: 100%;
    min-height: 500px;
}

.container-inside {
    border: 1px solid #1df2f2;
    width: 100%;
    border-radius: 5px;
    margin-top: 10px;   
    padding: 20px;
    box-sizing: border-box;
}

HTML:

<div class="container">
    <div class="container-inside">
      <div class="container-title">Images</div>
      <br>
      <div class="proof-container">
        <?php while($faf = $prooq->fetch()){ extract($faf); ?>
        <div class="image-container"> <img class="myThumb" id="myImg" src="https://wallpaperstock.net/wallpapers/thumbs1/45957hd.jpg" alt="" width="160" height="100">
          <div class="image-text">shreyansh ($8.75)<br>
            <span><?php echo date('jS M, Y (h:i a)', strtotime($pr_uptime)); ?></span></div>
        </div>
        <div id="myModal" class="modal"> <span class="close">&times;</span> <img class="modal-content" id="modalImg">
          <div id="caption"></div>
        </div>
        <?php } ?>
      </div>
    </div>
  </div>

Please help me devs.

Answer 1

Try to remove css property

 position:absolute from proof-container

And add

overflow:hidden to .container-inside div

Answer 2

You can give .container-inside to float:left . If you don't want float. Then simply give clearfix class to .container-inside and add clearfix property.

float Fiddle Demo

clearfix fiddle demo

and remove absolute from .proof-container if not required.

And make model display:none because you want to show model on click of the images. Make model position:absolute and adjust as you want.

This fiddle

Answer 3

Add overflow: hidden; or overflow: auto to .container-inside and remove position: absolute from .proof-container

 .image-container { width: 163px; height: 100px; padding: 0px 0px 65px 0px; font-size: 12px; text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; margin-right: 13px; display: inline-block; float: left; } .proof-container { width: 100%; } .container { width: 100%; min-height: 500px; } .container-inside { border: 1px solid #1df2f2; width: 100%; border-radius: 5px; margin-top: 10px; padding: 20px; box-sizing: border-box; overflow: hidden; } 

 <div class="container"> <div class="container-inside"> <div class="container-title">Images</div> <br> <div class="proof-container"> <div class="image-container"> <img class="myThumb" id="myImg" src="https://wallpaperstock.net/wallpapers/thumbs1/45957hd.jpg" alt="" width="160" height="100"> <div class="image-text">shreyansh ($8.75) <br> </div> </div> <div id="myModal" class="modal"> <span class="close">&times;</span> <img class="modal-content" id="modalImg"> <div id="caption"></div> </div> </div> </div> </div> 

Answer 4

Add overflow: auto to .container-inside and remove position: absolute from .proof-container add the style to your modal as below.

 .image-container { width: 163px; height: 100px; font-size: 12px; text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; display: inline-block; padding: 0px 0px 65px 0px; float:left; } .proof-container { width: 100%; } .container { width: 100%; min-height: 500px; } .container-inside { border: 1px solid #1df2f2; width: 100%; border-radius: 5px; margin-top: 10px; padding: 20px; box-sizing: border-box; overflow:auto; } #myModal{ float:left; margin-right: 10px; } 

 <div class="container"> <div class="container-inside"> <div class="container-title">Images</div> <br> <div class="proof-container"> <div class="image-container"> <img class="myThumb" id="myImg" src="https://wallpaperstock.net/wallpapers/thumbs1/45957hd.jpg" alt="" width="160" height="100"> <div class="image-text">shreyansh ($8.75)<br> <span>2nd Feb, 2017 (01:02 pm)</span></div> </div> <div id="myModal" class="modal"> <span class="close">&times;</span> <img class="modal-content" id="modalImg"> <div id="caption"></div> </div> <div class="image-container"> <img class="myThumb" id="myImg" src="https://wallpaperstock.net/wallpapers/thumbs1/45957hd.jpg" alt="" width="160" height="100"> <div class="image-text">shreyansh ($8.75)<br> <span>2nd Feb, 2017 (01:02 pm)</span></div> </div> <div id="myModal" class="modal"> <span class="close">&times;</span> <img class="modal-content" id="modalImg"> <div id="caption"></div> </div> <div class="image-container"> <img class="myThumb" id="myImg" src="https://wallpaperstock.net/wallpapers/thumbs1/45957hd.jpg" alt="" width="160" height="100"> <div class="image-text">shreyansh ($8.75)<br> <span>2nd Feb, 2017 (01:02 pm)</span></div> </div> <div id="myModal" class="modal"> <span class="close">&times;</span> <img class="modal-content" id="modalImg"> <div id="caption"></div> </div> <div class="image-container"> <img class="myThumb" id="myImg" src="https://wallpaperstock.net/wallpapers/thumbs1/45957hd.jpg" alt="" width="160" height="100"> <div class="image-text">shreyansh ($8.75)<br> <span>2nd Feb, 2017 (01:02 pm)</span></div> </div> <div id="myModal" class="modal"> <span class="close">&times;</span> <img class="modal-content" id="modalImg"> <div id="caption"></div> </div> </div> </div> </div>