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

[C2am]

¿y cual es el problema?
Supongo que será lo del título, pero está bueno que te explayes un poquito así sabemos que buscar en el código que has presentado.

Según parece deber ser algo que solucionas con limpiar los float.

Saludos

[matiasbesio]

Perdón me demoré en contestar. Si es porque cuando hago control menos o control mas las cajas se desbordan y quería saber porqué ocurre.