Unable to stretch div despite having content within

Question

Unable to stretch div despite having content within

I have encountered a problem with my containing div not growing with the content, despite trying various solutions such as using 'clear'. It seems that even when I apply 'clear' to different elements below, the parent div refuses to expand. Any assistance on this issue would be greatly appreciated.

View Image of problem:

For a live example please visit,

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

css html css-float

Answer 1

Answer №1

Consider adding overflow hidden to the parent li

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

    /*height: 100px;*/
  }

An issue with using overflow:hidden is that it may hide overflowing elements in your layout. To address this, you can use a clearfix class as shown below.

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

To implement this, simply add the clearfix class to your container elements. Learn more about Clearfix here.

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

Check out the demo on JSFiddle here.

Answer 2

Consider adding overflow hidden to the parent li

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

    /*height: 100px;*/
  }

An issue with using overflow:hidden is that it may hide overflowing elements in your layout. To address this, you can use a clearfix class as shown below.

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

To implement this, simply add the clearfix class to your container elements. Learn more about Clearfix here.

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

Check out the demo on JSFiddle here.

Answer 3

Answer №2

To resolve the issue, consider implementing a clearfix in your code:

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

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

Answer 4

To resolve the issue, consider implementing a clearfix in your code:

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

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

Answer 5

Answer №3

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

<div class='clearfix'></div>

To ensure that the div spans the content, remember to add the above div at the very end of your container div (probably after product-column-right) and just before your closing li tag.

Answer 6

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

<div class='clearfix'></div>

To ensure that the div spans the content, remember to add the above div at the very end of your container div (probably after product-column-right) and just before your closing li tag.

Answer 7

Answer №4

The height of your product.li style is currently set to 100px, which means it will limit the size of the box. To fix this, you should remove that setting or change it to height:auto. Additionally, add an empty clear div right before the closing li tag and everything should display properly.

To update your CSS definition:

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

Make sure your HTML code looks like this:

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

The height of your product.li style is currently set to 100px, which means it will limit the size of the box. To fix this, you should remove that setting or change it to height:auto. Additionally, add an empty clear div right before the closing li tag and everything should display properly.

To update your CSS definition:

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

Make sure your HTML code looks like this:

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

Answer №5

After utilizing overflow: for an extended period and encountering some issues, I made the decision to revert back to this clear fix method. If you are experiencing any difficulties, be sure to give it a try.

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

Answer 10

After utilizing overflow: for an extended period and encountering some issues, I made the decision to revert back to this clear fix method. If you are experiencing any difficulties, be sure to give it a try.

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

Unable to stretch div despite having content within

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Updating Icons in HTML Using Local Storage and Implementing a Dark Mode Feature Using JavaScript

Is it possible to apply a gradient to a table row in Internet Explorer?

Trouble with Leafletjs Routing Machine collapse button loading issue

Show a pair of pictures every X hours using Javascript

"Enhancing User Interaction: The Dynamic Trio of Ajax, Php, and MySql in Comment

Can someone explain why the color of a <select> element in Chrome is being influenced by the CSS property "font-family: inherit"? Here is an example

Struggles with conflicting versions of Jquery within asp.net

What is the best way to access the value of an HTML tag in React?

Animated image inside clickable element (HTML, CSS)

Elements that allow for asynchronous data submission without requiring a traditional submit button

CSS styling for positioning a dropdown submenu

How to Build a Custom Toolbar with Left and Right Aligned Elements using React.js and Material UI

The form does not support inserting all values through AJAX. We may need to implement a QUERY to handle this

Words displayed on an image, perfectly aligned in the center

The W3C validator verifies the cached iteration of the website

What is the best way to modify React state?

2-panel accordion interface

Utilizing jQuery to incorporate two datepickers for two separate fields (field 1 and field 2 with the second date being one day ahead), similar

How can you implement code that responds differently based on whether the user clicks the OK, cancel, or close button in a confirm dialog

Position div elements randomly on the webpage when it first loads