Desbordamiento de cajas flotantes

[matiasbesio]

Código CSS:

#sitio{
    background-color: #D0E0CE;
    border: 3px solid #333;
    height: 1200px;
    margin: 0px auto;
    width:980px;
    }
    #logo{
        border: 3px solid #333;
        width: 938px;
        height: 103px;
        margin: 20px auto;
    }
    #header{
        border: 3px solid #333;
        border-left: none;
        border-right: none;
        width: 980px;
        height: 40px;
        }
    #slide, #contenidos{
        border: 3px solid #333;
        width: 700px;
        height: 250px;
        margin: 20px;
        float: left;
        position: relative;
        }
        #contenidos{
            margin-top: 0;
            height: 687px;
        }
    .ads1, .ads2{
        border: 3px solid #333;
        width: 210px;
        height: 480px;
        clear: right;
        float: right;
        margin: 20px;
        margin-left: 0;
        position: relative;
        }   
        .ads2{
            height: 457px;
            margin-top: 0;
        }
 

Código HTML:

<div id="sitio"><!--Inicio: ID Sitio: Principal-->
     <div id="logo"></div>
     <div id="header"><!--Inicio: ID Header: Menu-->
          <div id="menu">
    <ul class="menu">
        <li><a href="#" class="parent"><span>Inicio</span></a></li>
        <li><a href="#" class="parent"><span>Empresa</span></a>
            <ul>
                <li><a href="#"><span>Quienes Somos</span></a></li>
                <li><a href="#"><span>Nuestra Misión</span></a></li>    
                <li><a href="#"><span>Nuestra Visión</span></a></li>                
            </ul>
        </li>
        <li><a href="#"><span>Servicios</span></a>
            <ul>
                <li><a href="#"><span>Delivery</span></a></li>
                <li><a href="#"><span>Servicio 1</span></a></li>    
                <li><a href="#"><span>Servicio 2</span></a></li>                
                <li><a href="#"><span>Servicio 3</span></a></li>                
            </ul>
        </li>
        <li><a href="#"><span>Gastronomía</span></a>
        <li><a href="#"><span>Locales</span></a>
        <li class="last"><a href="#"><span>Contacto</span></a></li>
        <li class="last"><a href="#"><span>Mapa Del Sitio</span></a></li>
    </ul>
</div>
 
Porqué al alejar el zoom se desbordan las cajas de lugar. Desde ya gracias. Como se evita?
      
 
 
     </div><!--Fin: ID Header: Menu-->
     <div id="slide"></div>
     <div class="ads1"></div>
     <div id="contenidos"></div>
     <div class="ads2"></div>
</div><!--Fin: ID Principal: Sitio-->