Problema con capas

cafero · #1 (**permalink**) 04/01/2009, 07:06

Tengo el sigueinte html

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<link rel="stylesheet" href="css.css" type="text/css" media="screen" charset="utf-8" />

</head>
<body>

<div id="contenedor">

<div id="cabecera">

</div>
<div id="nombre"><div/>

<div id="contenido">
<div id="menu">

</div>
<div id="descripcion"></div>

<div/>

<div id="pie"></div>

</div>

</body>
</html>

Y el sigueinte css

Cita:

body {
background: black;

}
#contenedor{

background:#6BBA70;
width:1000px;
margin:0px auto;
}

#cabecera
{
margin-top:100px;
float:inherit;
margin-left:5px;

width:900px;
height:100px;
margin:0px auto;
}

#murgi
{
float:right;
margin-right:10px;
background-image:url("navidad/imagenes/logo_murgi.jpg");
width:100px;
height:100px;
}
#logo
{

float:left;
margin-left:10px;
width:100px;
border: solid 1px blue;
}

#nombre{
margin-top:100px;
float:inherit;
margin:0px auto;
width:900px;
height:100px;
background-image: url(../imagenes/bigben.jpg);
margin-left:50px;

}

#contenido{

margin-top:105px;
float:left;
width:900px;
background:orange;

}

#menu{

float:left;
width: 200px;
height:470px;
background:#ff00ff;
}

#descripcion{

width:650px;
float:inherit;
margin:10px 10px 10px 10px;
}

Si la capa contenedor tiene puesto un height se ve asi

http://img300.imageshack.us/img300/5196/dibujo3tm5.jpg

Si le quito el heigh se me ve asi:

http://img184.imageshack.us/img184/837/dibujocvai9.png

Como hago para quitandole el heigh se me quede como en la primera imagen, esque es un ejercicio uqe tenemos que hacer y se nos prohibe usar el height. En el resto de las capas se lo e puesto para que veais el resultado de como queda.

Gracias

DragonX · #2 (**permalink**) 04/01/2009, 09:44

ponele esto:

Cita:

#contenedor{
overflow:hidden;
background:#6BBA70;
width:1000px;
margin:0px auto;
}

espero te sirva!

jomaruro · #3 (**permalink**) 04/01/2009, 10:08

No he entendido muy bien tu pregunta, ¿No puedes usar ni un solo height?

Bueno, creo que podrías solucionarlo así:

#menu{
float:left;
width: 200px;
padding-bottom:470px;
background:#ff00ff;
}

#descripcion{
width:650px;
padding-bottom:470px;
float:inherit;
background-color: Aqua;
}

y añadir el reset (en el CSS):

#borrar{
clear:both;
}

y en el HTML después del DIV id="pie"> (que por cierto tienes sin definir en el CSS):

<div id="pie">pie</div>
<div id="borrar"></div>