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

Float the parent div too.

This will mean that child elements that are floated won't float out of it.

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.

Answer 3

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 4

I usually give:

overflow:hidden;

I had a problem when i give overflow:auto; sometimes the outer div may display scrollbar.