Div not expanding with content

Question

I know there are several posts about this but none of the solutions are working for me. With that said, my containing div will not grow with my content. I know why this is happening, because it is 'float'ing but even when I use 'clear' it will not expand with the parent div. I've tried using using clear in nearly every element below with no success. Any help would be greatly appreciated.

View Image of problem:

enter image description here

For a live example please visit, 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.

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.

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

Bob · Answer 1 · 2014-08-15T14:42:11.247

4

Try to add overflow hidden to the parent li

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

    /*height: 100px;*/
  }

The problem with overflow:hidden is it will hide overflowing elements if you have them in your layout. So by using clearfix which is i suppose the best practice you can acheive it like below.

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

Then, basically you just need to add the class in your container elements. More about Clearfix

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

FIDDLE DEMO

edited Aug 15 '14 at 14:42

answered May 30 '12 at 13:25

Bob

1,489
1
16
28

Thanks! Never would have gotten that. – ajodom10 May 30 '12 at 13:53
glad it worked. If you don't want `overflow`, you can also try to add this inside the wrapper `li` as last element `
` – Bob May 30 '12 at 14:04

score 1 · Answer 2 · answered May 30 '12 at 13:25

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

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

Add the above div at the very end of your container div (i think after product-column-right) and just before your closing li tag. That should ensure that the div spans the content.

score 1 · Accepted Answer · edited May 23 '17 at 12:30

1

Adding a clearfix should solve your problem:

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

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

edited May 23 '17 at 12:30

Community

1
1

answered Feb 21 '14 at 18:36

Young

969
1
8
18

score 0 · Answer 4 · answered May 30 '12 at 13:28

Your product.li style has a height of 100px, so that's going to constrain the box no matter what. Remove that setting (or change it to height:auto) and then add an empty clear div just before the closing li tag and you should be fine.

So your CSS definition would change to:

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

And then the relevant 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>

score 0 · Answer 5 · answered Aug 06 '12 at 17:24

0

I was using overflow: for a while with much success - but I had a few problems and decided to go back to this clear fix. If you have any problems - check it out.

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

answered Aug 06 '12 at 17:24

sheriffderek

8,848
6
43
70

Div not expanding with content

5 Answers5