Hello everyone,

I've got this problem with Floats in Firefox. I've come accross this problem many times but have never really found a solution.

The problem is, my div that is floated to the right always seems to drop down underneath the div that's floated to the left. However, this problem doesn't always happen... sometimes the page loads fine but when you refresh the problem occurs.

Obviously, I can't just leave it the way it is.

Here is my CSS:

.float_left {
 float: left;
}
.float_right {
 float: right;
 text-align: left;
}
.clear {
 clear: both;
}
 
.product_categories {
 width: 159px; 
 margin-left: 3px;
 border: 1px solid red; 
}
.products {
 width: 678px; 
 border: 1px solid red; 
 margin-right: 3px; 
 margin-left: 6px;
}

The red borders are a guide for me to see where the DIVs sit.

Here is the HTML:

 
<div id="main_wrapper">
 <div id="header">
    
        <div class="float_left">
            <img src="images/shoppingbasket.jpg" alt="Shopping Basket" />
        </div>
            
        <div class="float_left top_links">
         <a href="#">0 Items in your Shopping Basket</a>
        </div>
        
        <div class="float_right top_links">
            
             <li><a href="#">Your Account</a></li>
                <li>|</li>
                <li><a href="#">Sign In</a></li>
            
        </div>
        
        <div class="clear"></div>
        
        <div class="sub_top_links">
        
            <a href="#">Customer Service</a> |
            <a href="#">About Us</a>   |   
            <a href="#">Store Locator</a>
            
        </div>
    
    </div>    
        
    <div id="nav_wrapper">
     
       <div id="main_nav_search">      
              
           <div class="float_right search_holder">                
                    <table width="253" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td>
                        <div class="search_textfield_bg">
                            <input name="search" type="text" border="none" class="search_textfield" value="Search... " />
                         </div> 
                         </td>
                        <td><input name="submit" type="image" src="images/go.jpg" /></td>
                      </tr>
                    </table>
                </div>
                   
             <li class="main_nav_cats"><a href="#">Women</a></li> 
                <li class="main_nav_cats"><a href="#">Girls</a></li> 
                <li class="main_nav_cats"><a href="#">Baby</a></li>
                <li class="main_nav_gen"><a href="#">Press</a></li> 
                <li class="main_nav_gen"><a href="#">Video</a></li> 
                <li class="main_nav_gen"><a href="#">News</a></li> 
                 
        </div>
        
       
        
        <div class="clear"></div>
        
    </div>
    
    <div id="content_wrapper">
    
  <div class="float_left product_categories"> 
         <div style="background-image:url(images/product_category_bg.jpg);">
             <div class="title">
             Products
             </div>
                .................
            </div><img src="images/product_category_bot.jpg" /></div>
        
        
        <div class="float_right products">
        
         ...
            
         </div>
         
         <div class="clear"></div>
        
    </div>
    
</div>
 

I've only included the CSS for the parts that it's affecting. You can take a look at the problem here: http://emzi.dreamhosters.com/primp/products-by-cat.html

Any help would be much appreciated. Thank you

You need to clean up the code a bit. You have <li> items not inside <ul> or <ol>. Also, make sure ALL floated items have width defined.

You also need to make sure that your TOTAL box width, which includes the box + borders + margins + padding does not exceed the width of the container they are in, in your case #main_wrapper. This is a common error amongst people new to css, they do not have a firm grasp on the box model. If you're getting a 'drop', it's more than likely due to total widths that exceed the available space.