Div padre que crece según contenido

[jiten]

Amigos :

He creado un Div "padre" (con una imagen de background) que contiene otro Div (del texto principal).

La idea es que cuando el texto crezca, me gustaría que el alto del DIV padre también lo haga para que su imagen se extienda a lo largo de todo el contenido. Hasta ahora he tratado muchas cosas peor no lo consigo aún.

Aquí está el link onde verán que al lado ziquierdo hay una imagen en degradé como sombra que sólo lleg hasta ciertas parte y no "crece":

http://satyaprem.com/website/gratidao.php

Alguna ayuda que me puedan dar ? muchas gracias,

[pzin]

¿Y qué si en lugar de usar imágenes usas box-shadow para darle la sombra?

Código CSS:

div#papi {
  box-shadow: 0 0 30px 0 rgb(0,0,0,0.5);
}
 

Así te ahorras una imagen, una carga y es más cómodo en general.

[jiten]

Iniciado por pzin

¿Y qué si en lugar de usar imágenes usas box-shadow para darle la sombra?

Código CSS:

div#papi {
  box-shadow: 0 0 30px 0 rgb(0,0,0,0.5);
}
 

Así te ahorras una imagen, una carga y es más cómodo en general.

Ok, esa opción es interesante, pero ojo que no necesito una sombra total alrededor, sino solamente a la izquierda y abajo... por otro lado, el problema de que el DIV padre no "crece" aún sigue siendo un problema, recuerda que lo que quiero hacer es que el DIV padre aumente de alto de acuerdo al contenido del DIV que está dentro con el contenido de texto...

[pzin]

Cierto.

Bueno, normalmente el comportamiento de todos los elementos son que crecen automáticamente según su contenido. Cuando usas posiciones absolutas, como es el caso, esos elementos dejan de formar parte del flujo natural del HTML y por lo tanto no ocupan ninguna altura para el resto de los elementos.
Así que tendrás que trabajar sin posiciones absolutas.

Respecto a la sombra, los dos primeros valores indican el desplazamiento sobre los ejes X e Y. Puedes indicar valores negativos también. Así puedes mover la sombra al lugar que quieras. Para ponerlo a la izquierda y por abajo, puedes probar poniendo el primer valor negativo y el segundo positivo:

Código CSS:

box-shadow: -20px 20px 30px 0 rgba(0,0,0,0.2);
 

[hackjose]

Aver si esto te sirve
http://jsfiddle.net/kmFgf/

el container que tiene el fondo le puse height: auto para que su altura sea automatica segun el contenido

El child del contenido tambien es height:auto por si el contenido es dinamico y asi cresca lo suficiente
El width solo lo puse por poner
Y el word-wrap lo puse por si hay una palabra que no quepa entonces sera cortada

Espero te halla entendido salu2

[jiten]

hackjose : he puesto padre e hijo con height:auto y nada... parece que por ahi no es...

[jiten]

Iniciado por pzin

Cierto.

Bueno, normalmente el comportamiento de todos los elementos son que crecen automáticamente según su contenido. Cuando usas posiciones absolutas, como es el caso, esos elementos dejan de formar parte del flujo natural del HTML y por lo tanto no ocupan ninguna altura para el resto de los elementos.
Así que tendrás que trabajar sin posiciones absolutas.

Respecto a la sombra, los dos primeros valores indican el desplazamiento sobre los ejes X e Y. Puedes indicar valores negativos también. Así puedes mover la sombra al lugar que quieras. Para ponerlo a la izquierda y por abajo, puedes probar poniendo el primer valor negativo y el segundo positivo:

Código CSS:

box-shadow: -20px 20px 30px 0 rgba(0,0,0,0.2);
 

Ok, cambié de absoluta a relativa.... pero es lo mismo... aún no veo que "crezca"la altura del DIV padre... cómo puedo hacer ? esto me está llevando mucho tiempo.. y pareciera que es algo simple... alguna idea ??

[Nass]

hola que tal, viendo tu problema he mirado un ejercicio que me mandaron hace mucho en clase y el div contenedor o padre como lo llamas lo tengo con estas características, pruebalo y comenta que tal:
<div id='anuncio' style = 'display: table; width: auto; text-align:center;'>

yo en vez de utilizar un archivo externo css he utilizado style dentro del div, supongo que la solución a tu problema es width:auto; lo que significa que le da altura automática a tu div según el contenido que contenga.

Nota: con width crece su altura, si quieres que crezca su anchura junto a width añadele height: auto; tambnién, así crecerá de altura y anchura según el contenido.

Un saludo.

[jiten]

Sigue sin funcionar... he simplificado los DIVS pero aún no crece el DIV parent cuando el contenido es más grande.... urgente ayuda por favor...

[pzin]

El problema, como digo, son las posiciones absolutas, pero no del contenedor, sino del contenido.

[jiten]

Pero cómo así te digo que ya cambié el DIV de contenido y ahora no tiene "position:absolute" , la he reemplazado por "relative" pero sigue igual.... qué y cómo debería cambiarlo según tu criterio ?

[pzin]

Los elementos que están dentro del contenedor son el problema, porque tienen una posición absoluta. Como tienen una posición absoluta, no están ocupando ningún espacio y por lo tanto el contenedor no va a crecer.