How can I ensure a DIV stretches to fit its contents?

Question

I have this HTML with a table:

<div
  class="currentDesignDiv"
  style="margin-bottom:5px;">
  <div>
    <img
      alt="Thumbnail"
      src="http://www.propertyware.com/templates/
        <bean:write name="currentTemplate" property="primaryKey"/>
      /thumb.gif"/>
  </div>
  <div>
    <table>
      <tr>
        <th>Your Current Design: </th>
        <td>Template #: 
          <bean:write name="currentTemplate" property="primaryKey"/>
        </td>
      </tr>
      <tr>
        <th>Last Updated: </th>
        <td>
          <bean:write name="currentTemplate" property="modifiedByAsString"/>
        </td>
      </tr>
      <tr>
        <th>Total Pages: </th>
        <td>
          <bean:write name="numberOfPages"/>
        </td>
      </tr>
    </table>
  </div>

Being styled by this CSS:

 .currentDesignDiv{
   background-color:#e7e7e7;
   border:1px solid #9c9c9c;
   padding:5px;
   width:100%;
   min-width:860px;
 }
 .currentDesignDiv div{
   float:left;
   width:33%;
 }
 .currentDesignDiv div table{
   font-size:9pt;
   text-align:left;
   margin:17px;
 }
 .currentDesignDiv div:first-child img{
   margin:17px;
   width:80px;
 }

It looks OK on my big monitor, but when I change to my small monitor the right-most div, which has an image inside of it, floats outside of the parent div. Does anybody have a solution for that?

Answer 1

set

overflow: auto; 

for the outer div. This should make your parent div expand even though its children have a float property. (IE has a few problems with this, but can be fixed by some padding)

Answer 2

Perhaps try giving the outer div this css...

display: inline-block;

Since floated elements do not really have any layout of their own, the outer div just acts like an empty div, not stretching to fit the elements inside of it.

Making the outer div inline-block will essentially make the inner divs take up some actual space in the outer div.