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