asked on

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>  <%=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>

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Hansen

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

Abiel de Groot

ASKER

Many thanks

A

Julian Hansen

You are welcome