Getting a parent Div to hug it's multiple floating children on page resize using css

Question

I'm making a slideshow with multiple user generated thumbnails filling a containing div. The layout is responsive, therefore the thumbs will stack ontop of each other when the page resizes. Is there any way to force the parent div to hug the contents tightly when the page is resized using just css? Below are some pics to illustrate my problem and my code is included.

Layout before resize

What I want to do

Is there anyway to remove the extra space in image 2??

.parent{background-color:#003300; overflow: auto; padding:0px 20px 20px 0px; position: absolute;}

.child{ width:100px; height:100px; float:left; background-color:#000066; margin:20px 0px 0px 20px;}

<div class="parent">

 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>

</div>

EDIT - I've changed the snippet to better represent what i'm trying to accomplish, it works, but it's ugly and the browsers scrollbar can mess up the changes via the media tag when the parent gets too big due to multiple children . So I guess my question now, is there a better way to achieve this without the multiple media tags?

body { margin:0; padding:0;}

.cnt{text-align:center; max-width:960px; background-color:#000000; margin:0px auto; overflow:hidden}

.parent{background-color:#003300; overflow: auto; padding:0px 20px 20px 0px;display:inline-block}

.child{ width:100px; height:100px; float:left; background-color:#000066; margin:20px 0px 0px 20px; text-align:center; line-height:100px; font-size:36px}


@media (max-width:740px) and (min-width:621px){.child:nth-child(5n+6){ clear:both;}}
@media (max-width:620px) and (min-width:501px){.child:nth-child(4n+5){ clear:both;}}
@media (max-width:500px) and (min-width:381px){.child:nth-child(3n+4){ clear:both;}}
@media (max-width:380px) and (min-width:261px){.child:nth-child(2n+3){ clear:both;}}
@media (max-width:260px) and (min-width:0px){.child{clear:both;}}

<div class="cnt">
<div class="parent">

 <div class="child">1</div>
 <div class="child">2</div>
 <div class="child">3</div>
 <div class="child">4</div>
 <div class="child">5</div>
 <div class="child">6</div>

</div>
</div>

Answer 1

Assuming you would like to keep the thumbnails square as well. You will have to do a simple padding hack with the use of percentages rather then a fixed widths.

From what I can tell from your pictures, you are wanting 6 boxes to show on larger screens. So you will need to break your blocks into 16.6666% widths which is 1/6th the width of the parent container. For this hack to work you will need to remove the height from the .child element and instead make use of the :after psuedo element with a padding-bottom of 100%, this will ensure the element stays square. The padding is based on width so no matter the width, the padding will match it.

Finally, you will need an absolute positioned element inside of the child element.

Solution below:

.parent{
        background-color:#003300;
        overflow:hidden;
        max-width:960px;
}
.child {
    position: relative;
    width:16.6666%;
    float:left;
    box-sizing: border-box;
}
.child:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}
.inner {
     position: absolute;
     top: 5%;
     left: 5%;
     background-color:#000066;
     width: 90%;
     height: 90%;
}

<div class="parent">
  <div class="child">
    <div class="inner">
            
    </div>
  </div>
  <div class="child">
    <div class="inner">
            
    </div>
  </div>
  <div class="child">
    <div class="inner">
            
    </div>
  </div>
  <div class="child">
    <div class="inner">
            
    </div>
  </div>
  <div class="child">
    <div class="inner">
            
    </div>
  </div>
  <div class="child">
    <div class="inner">
            
    </div>
  </div>
</div>

I highly recommend you make use of media queries with breakpoints to make this truly responsive. This will allow you to adjust the widths of the thumbs on different devices.