Hola, soy nuevo en los foros, y en el css, pero he estado leiendo por aqui y me ha gustado. Antes de preguntar que conste que he estado mirando por varios sitios, pero no veo como puedo hacer que un div anidado a otro coja la misma altura que este.
Os explico en primer lugar lo que pretendo hacer. Mi idea es poner noticias en una web, pero antes de recurrir al php he preferido por lo menos tener clara la estructura que debo tener en html+css.
Las noticias tendran una cabezera donde poner el titulo. Debajo de esta una parte izquierda donde poner quien ha escrito el mensaje, una imagen o lo q haga falta, y una parte derecha con elt exto de la noticia, incusive imagenes o lo que se le quiera poner mas adelante.
Por ultimo cada noticia tendra un pie de pagina.
Para ello he estructurado est pequeña estructura de la forma siguiente:
- Un div que me sirve de contenedor.
---- Un div de cabezera
---- Un div de cuerpo
-------- Un div de parte izquierda del cuerpo
-------- Un div de parte derecha del cuerpo
-------- Un div de ajuste, para que si alguno de los divs crece que no machaque el pie de la noticia o lo q venga debajo.
---- Un div de pie de pagina
La cosa es que los divs del cuerpo, les tengo un min-height asignado, para que se vean y tal. Pero si yo escribo muchas lineas en uno de los divs, me ocurre que el otro se me queda cortado, es decir, que no me llega hasta el final del contenedor del cuerpo.
Os adjunto el codigo css y html:
Cita: body {
font-size:12px;
font-family:sans-serif;
text-align:center;
}
h1 {
font-size:18px;
}
h2 {
font-size:16px;
}
h3 {
font-size:14px;
}
.ajustar{
margin:0px;
clear:both;
}
#contenidorNoticia {
margin:0px;
width:620px;
}
#contenidorCapNot{
margin:0px;
width:620px;
height:30px;
background-image:url(../imatges/noticia/cabNot.jpg);
}
#contenidorCosNot {
margin:0px;
width:620px;
min-height:200px;
}
#contenidorEsqCosNot{
margin:0px;
width:147px;
background-image:url(../imatges/noticia/cosEsqNot.jpg);
float:left;
min-height:200px;
overflow:auto;
}
#contenidorDretCosNot {
margin:0px;
width:473px;
background-image:url(../imatges/noticia/cosDretNot.jpg);
float:right;
min-height:200px;
}
#conteidorPeuNot{
margin:0px;
width:620px;
min-height:16px;
background-image:url(../imatges/noticia/peuNot.jpg);
}
#divgeneric {
margin:0px;
width:150px;
background-color:red;
text-align:center;
margin:0px auto;
}
#divacotathiv {
width:150px;
height:50px;
background-color:green;
text-align:center;
margin:0px auto;
}
#contenidor {
width:900px;
border:1px solid #333333;
margin:0px auto;
background-color:#aaa;
text-align:center;
}
Cita: <html>
<head>
<title>PROVES DE DIVS</title>
<link rel="stylesheet" type="text/css" href="estils/provesdivs.css">
</head>
<body>
<!--<div id="contenidor">
<div id="divgeneric">
prova de la longitut horitzontal sobre els divs, per veure si poden fer servir altres lineas.
</div>
<div id="divacotathiv">
Prova de respecte de longituts horitzontal i vertical sobre els divs, per confirmar la alçaria tambe.
</div></div>-->
<!--Aquest seria el contenido de la noticia-->
<div id="contenidorNoticia">
<!--Contenidor de la capcelera-->
<div id="contenidorCapNot"></div>
<!--Contenidoe del cos de la noticia, tant esq, com dret-->
<div id="contenidorCosNot">
<div id="contenidorEsqCosNot"></div>
<div id="contenidorDretCosNot">EVAPRUEVAPRUEVAUEVAPRUEV APRUEVAPRUEVAPRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA PRUEVA </div>
<div class="ajustar"></div>
</div>
<!--Contenidor del peu de la noticia-->
<div id="conteidorPeuNot"></div>
</div>
</body>
</html>
A ver si alguien me puede decir como hacer que a pesar de que uno de los div crezca, el otro tambien lo haga hasta el final del div que contiene ambos divs, porque he provado con height auto ademas del minheight y no funciona. Y si les pongo height al 100% simplemente baja hasta el final de la pagina, no respeta lo que quiero.
Gracias por adelantado.