Div не расширяется с контентом

Question

Я знаю, что есть несколько сообщений об этом, но ни одно из решений не работает для меня. С учетом сказанного, мой содержащий div не будет расти с моим контентом. Я знаю, почему это происходит, потому что это «float», но даже когда я использую «clear», он не будет расширяться с родительским div. Я пробовал использовать ясность почти в каждом элементе ниже без успеха. Любая помощь будет принята с благодарностью.

Просмотр изображения проблемы:

Для живого примера, пожалуйста, посетите, http://thehopcompany.com/index.php?id=49

--------------- CSS ---- ------------

.product { 
    width:775px; 
    margin:0;  
    padding:0; 
    margin-top:75px; 
    margin-left:-8px; 

} 
.product ol{ 
    margin:0px; 
} 
.product li{ 
    list-style:none; 
    margin: 0 0 15px 0; 
    padding:15px;  
    border:1px solid #ccc; 
    height:100px; 
    color:#000; 
} 
.product-column-left{ 
    float:left; 
    width:100px; 
    height:100px; 
} 
.product-column-right{ 
    float:left; 
    width:120px; 
    border-left:1px solid #ccc; 
    height:100px; 
    text-align:center; 
} 
.product-column-center{ 
    float:left; 
    width:470px; 
    min-height:100px; 
    padding-right:15px; 
    padding-left:15px; 
    text-align:left; 
    padding-bottom:30px; 
     display:block; 

} 
.product h2{ 
    font-size:18px; 
    margin-bottom:5px; 
    margin-top:0; 
} 
.product .text-underline{ 
    text-decoration:underline; 
} 
.description-text{ 
    font-size:12px; 
    color: #000; 

} 
.clear{ 
    clear:both; 
} 

-------------------------- HTML ------ ----------------------

 <li style="list-style:none;"> 

     <div style="width:750px;" > 

      <div class="product-column-left"> 

       <img align="left" style="border:0;" src="images/hop-pellets.png" width="100" height="100" /> 

      </div> 

      <div class="product-column-center" > 

       <h2><span class="hop-title-text-product">Columbus, Tomahawk and Zeus</span></h2> 

       <div class="description-text" >Proprietary naming rights sometimes have identical or nearly identical strains being sold under multiple names. Columbus, Tomahawk and Zeus, or the CTZ hops, are the most famous example of this phenomenon. CTZ hops are known as super-alpha hops due to the extremely high percentage of alpha acids they contain, making them ideal bittering additions. Columbus hops can be found alongside Centennial hops in Stone Ruination IPA or in Saranac's Brown Ale. 

Собственные права на именование иногда имеют одинаковые или почти одинаковые штаммы, продаваемые под несколькими именами. Колумб, Томагавк и Зевс, или хмель ЧТЗ, являются самым известным примером этого явления. Перелеты ХТЗ известны как супер-альфа-хмель из-за чрезвычайно высокого содержания альфа-кислот, которые они содержат, что делает их идеальными горькими дополнениями. Колумбские хмели можно встретить рядом со столетними хмелями в IPA Stone Ruination или в Браун-але Саранака.

   </div> 

      <div class="product-column-right"> 

       <h2>$0.00</h2> 



       <a href="index.php?cart=1&pid=49"><img style="margin-top:10px; border:0;" type="image"src="images/add-to-cart-button.png" width="90" height="25" /></a> 

      </div> 

     </div> 

    </li> 

    </ol> 

    </div> 

Answer 1

Добавление clearfix должно решить вашу проблему:

.clear{width: 100%; clear: both; height: 0px; line-height:0px;} 

<div class='clear'></div> 

Answer 2

.clear{width: 100%; clear: both; height: 0px; line-height:0px;} 

<div class='clear'></div> 

Добавьте выше DIV в самом конце вашего контейнера DIV (я думаю, что после того, как продукт-колонного справа) и непосредственно перед закрывающей Li тега. Это должно гарантировать, что div охватывает контент.

Answer 3

Попытки добавить переполнение скрытого родителю li

.product li { 
    .... 
    overflow: hidden; 

    /*height: 100px;*/ 
    } 

Проблема с overflow:hidden он будет скрывать переполняющие элементы, если они у вас есть в макете. Поэтому, используя clearfix, я полагаю, что лучшая практика вы можете получить, как показано ниже.

.clearfix:after { 
    content: " "; /* Older browser do not support empty content */ 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both; 
} 

Тогда, в основном вам просто нужно добавить класс в ваших container элементов. More about Clearfix

<li class="clearfix"> 
    <div style="float: left;">   
     <div class="content">Big content</div>  
    </div> 
</li> 

FIDDLE DEMO

Answer 4

Ваш стиль product.li имеет высоту 100px, так что это будет не ограничивать поле ни на что. Удалите эту настройку (или измените ее на высоту: автоматически), а затем добавьте пустой ясный div непосредственно перед закрывающим тегом li, и вы должны быть в порядке.

Так что ваше определение CSS изменится на:

.product li{ 
    list-style:none; 
    margin: 0 0 15px 0; 
    padding:15px;  
    border:1px solid #ccc; 
    height:auto; 
    color:#000; 
} 

, а затем соответствующий HTML:

  <a href="index.php?cart=1&pid=49"><img style="margin-top:10px; border:0;" type="image"src="images/add-to-cart-button.png" width="90" height="25" /></a> 

     </div> 

    </div> 
    <div style="clear:both"></div> 
</li> 

</ol> 

</div> 

Answer 5

Я использовал переполнение: на некоторое время с большим успехом - но у меня было несколько проблем и решил вернуться к этому ясному исправлению. Если у вас есть проблемы - проверьте это.

http://css-tricks.com/snippets/css/clear-fix/