Как я могу обеспечить растяжение DIV, чтобы соответствовать его содержимому?

У меня есть этот HTML-код с таблицей:

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

В стиле 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;
 }

Он выглядит хорошо на моем большом мониторе, но когда я перехожу на свой маленький монитор, самый правый div, который имеет изображение внутри него, плавает за пределами родительского div. У кого-нибудь есть решение для этого?

Ответ 1

set

overflow: auto;

для внешнего div. Это должно привести к расширению родительского div, хотя его дочерние элементы имеют свойство float. (IE имеет несколько проблем с этим, но может быть исправлено некоторым дополнением)

Ответ 2

Возможно, попробуй дать внешнему div этот css...

display: inline-block;

Поскольку плавающие элементы на самом деле не имеют собственного макета, внешний div просто действует как пустой div, а не растягивается, чтобы соответствовать элементам внутри него.

Создание внешнего div-строкового блока будет по существу сделать внутренние divs занимать некоторое фактическое пространство во внешнем div.

Ответ 3

Я обычно даю:

переполнения: скрытый;

У меня возникла проблема, когда я давал переполнение: auto;, иногда внешний div может отображать полосу прокрутки.

Ответ 4

Поплавьте родительский div тоже.

Это означает, что дочерние элементы, которые плавают, не будут выплывать из него.