Problema con el height automatico en divs anidados

chajaen · #1 (**permalink**) 27/08/2009, 03:32

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="contenidorNoticia">

<div id="contenidorCapNot"></div>

<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>

<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.

hades87 · #2 (**permalink**) 27/08/2009, 05:07

Te has mirado esto? http://www.librosweb.es/css_avanzado...ar_floats.html

chajaen · #3 (**permalink**) 27/08/2009, 07:38

No, no habia mirado ahi, despues de leermelo he optado por poner el fondo al contenedor del cuerpo, y lo soluciono tal como quería.

Muchas gracias ^^.

jomaruro · #4 (**permalink**) 27/08/2009, 13:42

Hola:

PRUEBA

Saludos.