Foros del Web » Creando para Internet » CSS »

Capa float sobrepasa otra capa

Estas en el tema de Capa float sobrepasa otra capa en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 19/04/2008, 20:21
end
 
Fecha de Ingreso: abril-2008
Mensajes: 1
Antigüedad: 9 años, 7 meses
Puntos: 0
Capa float sobrepasa otra capa

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">
  <
pBlizzlike StatusFun 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:0padding:0;}

html {height:100%;}
body {height:100%; background:#000 url(bg_body.jpg) top left repeat-x;}
p{font-family:"Times New Roman"Timesseriffont-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.jpgrepeat-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:bothheight:0px;}

.
info_top {width:100%; height:23pxtext-align:centerbackground-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.
  #2 (permalink)  
Antiguo 20/04/2008, 07:57
 
Fecha de Ingreso: abril-2008
Ubicación: -
Mensajes: 156
Antigüedad: 9 años, 7 meses
Puntos: 5
De acuerdo Re: Capa float sobrepasa otra capa

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!
  #3 (permalink)  
Antiguo 20/04/2008, 13:08
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Capa float sobrepasa otra capa

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:24.