tamaño de div de acuerdo a su contenido

bet0 · #1 (**permalink**) 02/03/2006, 18:00

hola, estoy comenzando con xhtml y esta es mi primer página... tengo un div llamado contenido y dentro tengo otras cosillas... lo que quiero hacer es que el div cambie su alto mientras mas contenido le añada... aqui está el codigo...

index.php

Código HTML:

<!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" />
<title>Rage-films</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="cuerpo">
	<div id="cabecera"><h1><a href="http://www.rage-films.com/" title="Rage-Films (todos los derechos, izquierdos y ambidiestros reservados.)"><span>Rage-Films</span></a></h1></div>
  <div id="contenido">
		<div id="admin">Admin</div>
		<div id="menu">
			<span>
			  <a href="a"><div class="link">Seccion 1</div></a>
			  <a href="a"><div class="link">Seccion 2</div></a>
			  Seccion 3<br />
			</span>
	  </div>
	  <div id="include">
	  aaa<br />
a<br />
a<br />
a<br />
aaaaaaaaa<br />
<br />
<br />
<br />
<br />
aaa<br />
<br />
<br />
<br />
<br />
<br />
<br />
aaaa
	  </div>
  </div>
	
</div>
</body>
</html>

estilo.css

Código HTML:

body {
	background-color: #DCE7EF;
	width: 950px;
	margin: 0px auto 0px auto; padding: 0;
}
#cuerpo {
	background-color: #FFFFFF;
	margin: auto;
	padding: 0;
	border: #000000 solid 1px;
	
	
}

#cabecera {
	
	border-bottom: 0px;
	padding: 0;
}

#cabecera h1 {
	background: url(cabecera.jpg) no-repeat left top;
	height: 120px;
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	padding: 0;
	margin: 0;
}
#cabecera h1 a {
	width: 950px;
	height: 120px;
	display: block;
	text-decoration: none;
}
#cabecera h1 a span {
	display: none;
}

#contenido {
	background: url(sombra.gif) repeat-x top;
	
	min-height: 200px;
	margin: 0;
	padding: 0;
	border-top: #000000 solid 1px;
	display: block;
	height: auto;
	
}

#admin {
	text-align: right;
}
#menu {
	overflow: hidden;
	width: 15%;
	height: 10em;	
	float: left;
	
}
#menu span {
	border-bottom: 1px dotted;
	border-top: 1px dotted;
	border-right: 1px dotted;
	margin: 0;
	text-align: left;
	float: left;
	width: 80%;
	height: 80%;
	background: url(menu.gif) top left repeat-x;
}
#menu span a {
	text-decoration: none;
	padding: 0;
	margin: 0;
}
#menu span a:hover {
background: #FFFFFF;
text-decoration: none;
}
#menu div.link {
	width: 100%;
	cursor: pointer;
	padding: 0;
	margin: 0;
}
#menu div.link:hover {
	background: #FFF;
}
#contenido #include {
	float:right;
	width: 85%;
}

aqui pueden ver como se ve
http://img234.imageshack.us/img234/3861/dibujo5le.jpg

man0l0 · #2 (**permalink**) 02/03/2006, 19:15

Vamos que tu DIV si que ha cambiado de tamaño, el problema es que la imágen que contiene el "fin del diseño" no es el contenedor CONTENIDO.

Agrega la línea en negro a tu CSS y verás que lo que te digo es cierto.

#contenido {
background: url(sombra.gif) repeat-x top;
background-color: #FFFFFF;
min-height: 200px;
margin: 0;
padding: 0;
border-top: #000000 solid 1px;
display: block;
height: auto;
}

Saludos!

bet0 · #3 (**permalink**) 02/03/2006, 19:49

y entonces por que el div cuerpo no se hace mas grande si es el que tiene el color blanco de fondo? hic lo que me dijiste y no pasó nada sigue igual...