problema con el color de fondo

yuo2 · #1 (**permalink**) 12/02/2011, 09:55

Hola, tengo un pequeño problema con el color de fondo de una capa , esa capa contiene 3 capas mas.

Aqui mi codigo es simple...

El codigo de mi HTML

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="estilo.css" rel="stylesheet" type="text/css" media="screen" />
<title>ejemplo</title>
</head>
 
<body>
 
<div id="cuerpo">
 
      <div id="colizq">
            IZQUIERDA
            <br>IZQUIERDA</br>
            <br>IZQUIERDA</br>
      </div>
            
      <div id="colcuerpo">CENTRO</div>
      
      <div id="colder">DERECHA</div>
</div>
 
</body>
</html>

Aqui esta el codigo de mi hojas de estilos

Código CSS:

Ver original/* CSS Document */
 
#cuerpo{
    position: relative;
    width: 800px;
    height: auto;
    background-color: #FF0000;
    background-repeat: repeat-x;
    
}
 
#cuerpo #colizq{
    float:left;
    width: 200px;
    position: relative;
    height: auto;
}
 
 
#cuerpo #colcuerpo{
    width: 400px;
    float: left;
    position: static;
    border: none;
    height: auto;
}
 
#colcuerpo #colder{
    width: 200px;
    position: relative;
    float: left;
    border: none;
    height: auto;
}

Bueno el problema esq el color de fondo no logra llenar todoo.. aqui una imagen para mejor comprension..

nose porq en el dreamweaver se ve perfectamente pero cuando le hago vista preliminar en el navegador no llega todo el fondo de color..

cristian_cena · #2 (**permalink**) 12/02/2011, 10:04

Hola yuo2.

prueba con:
1 - dar overflow:hidden; a la capa que contiene elementos flotados.
2 - quitar height:auto; a la capa #cuerpo{}

Debería quedarte así:

Código CSS:

Ver original#cuerpo{
    position: relative;
    width: 800px;
    background-color: #FF0000;
    background-repeat: repeat-x; /*esto también está demas, pues no tienes ninguna imagen a repetir*/
    overflow:hidden;
}

Esta técnica se conoce como "limpiar los float" y hace referencia al problema de que la caja padre no toma la altura de su contenido, cuando este esta formado por cajas flotadas.

P/D:
También, para el mismo fin, se puede incluir un div vacío debajo de la capa que contiene los elementos flotados y hacer uso de la propiedad clear:
<div style="clear: both"></div>

Aunque aconsejan usar overflow:hidden.

Espero te sirva esta info. En el enlace puedes estudiarlo más en detalle. Un abrazo.

yuo2 · #3 (**permalink**) 12/02/2011, 10:12

Gracias... funciono Ok..

TEPO · #4 (**permalink**) 12/02/2011, 12:19

Nunca le des bola al dreamweaver, te muestra cualquier cosa.-