Css expand Div to fit its content (Of other divs)

I have several divs inside each other. I have made an external div “s_GalleryFrame_Outer”, and want this div to expand to fit all its content. However, one of those divs contains a dynamic gallery. I have these images “float: left;” so as they fit responsively to the viewport. However, this is causing them to not display inside my main div. If I remove the float left, they simply stack one on top of the other.  
Any advice.
A
Css
.Js_GalleryFrame_Outer {
      background-color: #FFFFFF;
      border-radius: 9px;
      border-width: 2px;
      border-color: #FFFFFF;
      display: block;
      clear: both;
}
Js_GalleryClear {
      display: block;
      margin: auto;
}
.Js_OuterGallery {
      display: block;
      margin: auto;
}
.js_Gal-Pic {
      position: relative;
      background-size: auto 150px;
      background-repeat: no-repeat;
      min-height: 150px;
      float: left;
      margin-top: 4px;
      margin-right: 4px;
      margin-bottom: 4px;
      margin-left: 4px;
}


HTML
<div class="Js_GalleryFrame_Outer">
  <div class="">
        <h4 class="headline"><i class="fa fa-picture-o fa-2x" aria-hidden="true"></i>&nbsp;&nbsp;<%=strGalleryTitle%>aaaa</h4>
  </div>
 
  <div class="Js_GalleryClear">
        <p><%=strGalleryDesc%></p>
  </div>

        <div class="Js_OuterGallery">
        <%
        For IG_k = 0 to Ubound(ArrPicsToShow,2)
        If IG_k < 30 Then
        %>
        <div class="js_Gal-Pic" id="Js-Gal<%=ArrPicsToShow(0,IG_k)%>" style="background-image: url(<%=Code_GD_Protocol & strURL%>GalleryImages/<%=ArrPicsToShow(4,IG_k)%>);  "><a href="<%=Code_GD_Protocol & strURL%>GalleryImages/<%=ArrPicsToShow(4,IG_k)%>" rel="imagebox[Gallery]" class="thumbnailxx" title="<%=ArrPicsToShow(2,IG_k)%>">
            <img src="<%=Code_GD_Protocol & strURL%>VD_Generic_Images/gal-trans.gif" alt="<%=ArrPicsToShow(1,IG_k)%>" />
        </a>
        </div>    
        <%
        End If
        Next
        %>
        </div>
</div>
LVL 5
Abiel de GrootAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
Add overflow:hidden to the outer frame
.Js_GalleryFrame_Outer {
      background-color: #FFFFFF;
      border-radius: 9px;
      border-width: 2px;
      border-color: #FFFFFF;
      display: block;
      overflow: hidden; /* ADD THIS */
}

Open in new window

Sample here
0
 
Julian HansenCommented:
Another solution is to add this class (instead of the overflow: hidden)
.Js_OuterGallery:after {
	content: "";
	clear: left;
	display: table;
}

Open in new window

Sample here
0
 
Abiel de GrootAuthor Commented:
Many thanks

A
0
 
Julian HansenCommented:
You are welcome
0
All Courses

From novice to tech pro — start learning today.