Floating divs, simple Im sure but goofy outcome

Hey i just ran across another odd issue with what we were discussing today.

If you go to
http://www.gophertelecom.com/phone-systems.html

You should the first item in the list as the dkt2020sd. And you notice it has a much longer mini descrip there. Well, when youo begin to close the browser down to be less wide, instead of the mini description wrapping, the entire block slides under the photo.

Any ideas on how to stop that? :headbang: :nanaman:

Hi,

You mixed up the rules :slight_smile:

The float needs a 100% width (with no margins) but it needs to be inside the original static element that had a left margin.

To make it simpler use the method that Gary gave above and was mentioned at the end of my demo.

e.g.


.product-shop-float {
    margin-left:150px; 
    overflow:hidden;
    zoom: 1;   /* sets hasLayout for IE<8 */
    float:none!important;
}


The element isn’t floated but overflow creates the new block formatting context instead. (Haslayout is needed for old IE).

However Opera has a problem with the above and applies the margin from the floated image instead. (Opera may actually be correct here as margins on elements with overflow shouldn’t collapse.) You could instead use a little padding instead of the margin:


.product-shop-float {
[B]    margin:0;
padding:0 0 0 25px;[/B] 
    overflow:hidden;
    zoom: 1;   /* sets hasLayout for IE<8 */
    float:none!important;
}

The only draw back is that IE6 will drop underneath the image because the min-width won’t come into play.

The fullproof solution is the one posted in my demo and which needs the extra wrapper element.:slight_smile:

<div class=“listing-tem”>

<div class="listing-item">
                <div class="product-image">
                   <a href="" title="">
                      <img src="" />
                   </a>
                </div>

                <div class="product-shop-float">

		<div class="product-shop">
            <h5><a href="">Toshiba DKT2010-SD Display Speakerphone</a></h5>
                        

        
    <div class="price-box">
          <p class="old-price">
                <span class="price-label">Regular Price:</span>
                <span class="price" id="old-price-1">$125.00 </span>
          </p>

            <p class="special-price">
                <span class="price-label">Special Price:</span>
                <span class="price" id="product-price-1">$75.00</span>
            </p>
                    
    
        </div>

        <button class="form-button" onclick=""><span>Add to   Cart</span></button>
           <div style="clear:both; height:0; overflow:hidden; "></div>

            <div class="description">mini descrip here
                     <a href=""><small>Learn More</small></a>
            </div>
            <p class="add-to">
                 <a href="" class="link-cart">Add to Wishlist</a><span class="pipe">|</span><a href="">Add to Compare</a>
                </p>
        </div></div>
    </div>

.product-shop-float was the extra wrapper I added… I thought any way.

yes but it should have been inside the original element that had a margin left :slight_smile:

Using the html structure you have now you would need this code.


.product-shop-float {
    margin:0 0 0 150px!important; 
        float:none!important;
}
.product-shop {
     float:left;
     width:100%;
    margin:0!important;
}


The !importants are there because you seem to have multiple rules spread around with various settings so I needed to be sure to cancel them out.:slight_smile:

You’re a genius. That fixed it right up, thank you very much