Capa float sobrepasa otra capa

end · #1 (**permalink**) 19/04/2008, 19:21

Hola antes que nada.

Mi problema viene cuando intento que una capa, que esta debajo de dos capas a modo de columnas posicionadas con float, se desplace hacia abajo cuando estas crezcan, y aqui tanto IE7 como Firefox me hacen algo extraño. Tras haber limpiado el float para que chocaran con un div situado por debajo, una de ellas sigue atravesandolo, concretamente la de la derecha.

Dejo el código HTML:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<title>Documento sin t&iacute;tulo</title> 
</head> 
 
<body> 
<div id="global"> 
<div class="info_top"> 
  <p> Blizzlike Status: Fun Status: </p> 
</div> 
    <div id="container"> 
    <div id="h_logo"><img src="top1(3).png" alt="" width="1000" height="250" /></div> 
        <div id="block_left"> 
          <p><img src="bg_h_block.png" alt="" width="160" height="25" /></p> 
        </div> 
          <div id="cont_txt"> 
            <div id="cont_txt_top"></div> 
             <div id="cont_txt_body"> 
                 <p>Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto v Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto Texto texto </p> 
                 <p>&nbsp;</p> 
             </div> 
            <div id="cont_txt_bottom"></div> 
     
          </div> 
        <div class="antiflote"></div> 
        <div class="metal_line"></div> 
         
    </div> 
 
 
</div> 
</body> 
</html>

Y el CSS:

Código PHP:

  /* CSS Document */ 
 
* {margin:0; padding:0;} 
 
html {height:100%;} 
body {height:100%; background:#000 url(bg_body.jpg) top left repeat-x;} 
p{font-family:"Times New Roman", Times, serif; font-size:13px;} 
 
#global {height:100%; width:100%;} 
 
#container { 
    width:1000px; 
    height:100%; 
    margin:auto; 
    padding-top:40px; 
} 
 
#h_logo{height:250px; margin-bottom:20px;} 
 
#block_left { 
    float:left; 
    width:180px; 
    height:100%; 
    padding-right:20px; 
    background:url(bg_left_block.jpg) repeat-y right; 
} 
 
#cont_txt {float:right; width:800px; height:100%;} 
 
#cont_txt_body {text-align:justify; background:url(bg_con_txt.gif) repeat-y;} 
#cont_txt_body p {color:#660000; padding:0px 45px 0px 45px;} 
 
#cont_txt_top, #cont_txt_bottom {height:36px; background:url(bg_b_top.gif) no-repeat;} 
#cont_txt_bottom {background:url(bg_b_bottom.gif) no-repeat;} 
 
/* bloque anti-flote */ 
.antiflote {clear:both; height:0px;} 
 
.info_top {width:100%; height:23px; text-align:center; background-color:#000000;} 
.info_top p { 
    color:#CCCCCC;  
    font-size:10px; 
    font-weight:bold; 
    padding-top:5px; 
}

Llevo horas peleandome con esto y no consigo darle solucion, sigo sin entender por que una de las capas sigue atravesando la capa de abajo.
Gracias de antemano.

nedrek · #2 (**permalink**) 20/04/2008, 06:57

Elimina todos los:

Código:

height:100%;

Suele dar problemas pues los porcentajes del height no están referenciados a un contenedor.

Se ajusta automáticamente al contenido, a no ser que:

- No quieras que pase de un tamaño determinado (el min-height o max-height funciona con errores en IE, así que deberás encontrar un fix javascript si quieres que no pase esto).

- Determines un height fijo.

Un saludo!

Mikmoro · #3 (**permalink**) 20/04/2008, 12:08

No he podido ver el caso porque en tu código no veo ningún bloque en el pie que sea atravesado por la barra derecha; lo único que veo es un div
<div class="metal_line"></div>, cuya referencia no encuentro en la css, y al no poder ver la imágenes no veo lo que dices.

Mikel.