Problema con CSS height

Fabih24 · #1 (**permalink**) 19/12/2012, 07:30

Hola, tengo un problema que parece ser la solución bastante simple pero aún así me esta volviendo loco por eso lo posteo.

Problema: Necesito hacer que lo que esta de amarillo(div de avatar) llegue dinamicamente hasta abajo del div de contenido, sin importar la cantidad de texto ingresado en el div de comentario (rojo).

Solución: Esto lo pude solucionar con Jquery, saque la altura que tiene el div de contenido y se la puse al div de avatar, pero esta solución no me convenció porque quiero hacerlo con css puro, ya que es algo bastante simple.

Código:

Código HTML:

Ver original<html>
<head>
    <title>Muestra del css que me esta volviendo loco</title>
</head>
 
<style>
.contenido {
width:500px;
background-color:blue;
}
.avatar {
width: 40px;
padding-top:10px;
padding-left:10px;
float:left;
background-color:yellow;
}
.comentario {
background-color:red;
}
</style>
<body>
    <div class='contenido'>
        <div class='avatar'><img src='avatar.jpg' width='30' height='30' /></div>
        <div class='comentario'>
        Esto es un comentario largo de prueba dasid uasid usaiu diasu dias oudasu oidaus dioasu doiasu dioasu dioas uioasu iofsaufoiasufoias ufsiao ufasio uioasf dadk ajskd asjdlasj dlkaj klasjdklajd kalsjd klasj dklas jdlkas jdakls jdakl jdklasj dlka jdaksl jaslk jdklasj dklas jdklasj kdlajsk dlasjdkasj
        </div>
    </div>
</body>
</html>

Norld · #2 (**permalink**) 19/12/2012, 08:29

No se si entendí bien, pero para que el div .comentaro no este dentro de .avatar solo tienes que poner:

.comentario {
float: left;
}

en un lado te queda el div avatar y en otro div comentario. El alto vendrá dado por el tamaño que tenga tu imagen.

Fabih24 · #3 (**permalink**) 19/12/2012, 09:56

Cita:

Iniciado por Norld

No se si entendí bien, pero para que el div .comentaro no este dentro de .avatar solo tienes que poner:

.comentario {
float: left;
}

en un lado te queda el div avatar y en otro div comentario. El alto vendrá dado por el tamaño que tenga tu imagen.

No es tan sencillo, porque si te fijas el div de avatar tiene un width fijo de 40px, y cuando le agrego el float al div de comentario me queda arriba el avatar y abajo el comentario... porque es como que le agrega un width de 100% al comentario.

Bandit · #4 (**permalink**) 19/12/2012, 12:54

Hola Fabih24:
Con CSS no es posible que un div crezca o se reduzca en relación a otro div, ya que solamente modificará su tamaño según su contenido.
Lo que podrías hacer es aumentar a .avatar la siguiente línea: margin-bottom: el valor en px para que cope la altura del otro div.

Espero haberte sido de ayuda.

Fabih24 · #5 (**permalink**) 19/12/2012, 17:16

Ya pude solucionarlo, era bastante sencillo al final... le puse un margin-left:50px; al div de comentario (que es el ancho que ocupa el de avatar) y listo...

Gracias a los que me trataron de ayudar...

Saludos!