Div relativo y height auto

[JessicaTJ]

Hola chicos, habra alguna manera de que un DIV con posicion relativa, tome un height automatico de acuerdo a lo que contiene?

El codigo seria algo asi:

Código CSS:

#footer { width:990px; height:auto; position:relative; margin:0 auto; background:#FFF; }
#footer_content1 { width: 470px; height:auto; position:absolute; background: #EEE; padding:10px; }
#footer_content2 { width: 470px; height:auto; position:absolute; background: #EEE; padding:10px; left:500px; }
 

Código HTML:

<div id="footer">
    <div id="footer_content1">
        123
    </div>
    <div id="footer_content2">
        456
    </div>
</div>
 

Pero obviamente no toma el height automatico que le pido que tome, los contenidos son unicamente 2 DIVs con position absoluta.

Desde ya, agradecere mil su ayuda !!!

[jomaruro]

Hola:

Prueba con overflow:auto.

Saludos.

[_Adrian_]

Hola. El problema es que los 2 divs son position:absolute; , pon position:relative; y entonces deberia funcionar.

Saludos

[JessicaTJ]

Ke cosas XD.

Lo ke pasa al ponerlo como relativo se "salta" al siguiente "renglon" el DIV, lo hice asi de prueba

Código HTML:

<div style="width:1000px; height:auto; margin:0 auto;">
  <div style="width:600px; position:relative; left:200px; height:auto;">
    <div style="position:relative; left:100px; height:auto; top:0px; width:50px;">
            123<br />123<br />123<br />123
      </div>
        <div style="position:relative; left:200px; top:0px; height:auto; width:50px;">
            456<br />456<br />456<br />123
      </div>
  </div>
</div>
 

Alguna otra idea chicos?

[KurozakiIchigo]

Trata quitando el "left" y el "top", ya que por estar dentro de un mismo div y estar en posicion relativa, deben quedar alineados.

Saludos.

p.d: lo que podrias hacer es flotarlos, uno a la derecha y otro a la izquierda, y por estar en el mismo div, quedaran relativos y a pie del inicio del div contenedor.

[JessicaTJ]

Iniciado por KurozakiIchigo

Trata quitando el "left" y el "top", ya que por estar dentro de un mismo div y estar en posicion relativa, deben quedar alineados.

Saludos.

Nop, sigue igualito, y si kito el left obviamente no me va a espaciar lo ke necesito :(

Iniciado por KurozakiIchigo

p.d: lo que podrias hacer es flotarlos, uno a la derecha y otro a la izquierda, y por estar en el mismo div, quedaran relativos y a pie del inicio del div contenedor.

Tampoco XD lo ke necesitamos es que sean posicionados mediante "coordenadas" no floats :(

[kseso?]

Hola chicos, habra alguna manera de que un DIV con posicion relativa, tome un height automatico de acuerdo a lo que contiene?

Ese es el comportamiento que por defecto tienen los div a los que no se les declara expresamente una altura.
La aumentan en función del contenido. Así que su problema no hay que enfocarlo por ese lado, en hacer que crezca (porque lo debería hacer).
Lo que se debe preguntar es porqué no lo hace entonces.
La respuesta es que usted ha hecho (con su css) que el contenido (#footer_content1 y#footer_content2) se comporte como si no estuviese ahí para ciertos aspectos.
Los ha sacado del flujo del html al declararlos con posición absoluta.


Para ampliar información:
Posicionamiento y visualización
Las dos guías de Migración de Mikmoro que están en la parte superior de este foro de css

[JessicaTJ]

Iniciado por kseso?

Ese es el comportamiento que por defecto tienen los div a los que no se les declara expresamente una altura.
La aumentan en función del contenido. Así que su problema no hay que enfocarlo por ese lado, en hacer que crezca (porque lo debería hacer).
Lo que se debe preguntar es porqué no lo hace entonces.
La respuesta es que usted ha hecho (con su css) que el contenido (#footer_content1 y#footer_content2) se comporte como si no estuviese ahí para ciertos aspectos.
Los ha sacado del flujo del html al declararlos con posición absoluta.


Para ampliar información:
Posicionamiento y visualización
Las dos guías de Migración de Mikmoro que están en la parte superior de este foro de css

Entonces no se puede verdad?

[rzkgraphics]

Iniciado por JessicaTJ

Hola chicos, habra alguna manera de que un DIV con posicion relativa, tome un height automatico de acuerdo a lo que contiene?

El codigo seria algo asi:

Código CSS:

#footer { width:990px; height:auto; position:relative; margin:0 auto; background:#FFF; }
#footer_content1 { width: 470px; height:auto; position:absolute; background: #EEE; padding:10px; }
#footer_content2 { width: 470px; height:auto; position:absolute; background: #EEE; padding:10px; left:500px; }
 

Código HTML:

<div id="footer">
    <div id="footer_content1">
        123
    </div>
    <div id="footer_content2">
        456
    </div>
</div>
 

Pero obviamente no toma el height automatico que le pido que tome, los contenidos son unicamente 2 DIVs con position absoluta.

Desde ya, agradecere mil su ayuda !!!

La verdad que yo también he buscado esto...y la manera que encontré fué usar overflow:auto , esto hace que aparezca la barra de navegación lateral al lado de tu div y puedas seguir bajando para ver la información, lo que si no sé es porqué algunas veces poniendole las medidas y todo, en vez de salirme vertical, me salió horizontal jejeje. ( si alguien me ayuda en eso a mi porfavor, les agradecería mucho )

[dakel]

Hola,

no entiendo porque usas position absolute en este problema de maquetación.

Quiero decir, supongo que el resultado seria, una capa contenedora de dos capas una al lado de otra, donde éstas pueden crecer segun su contenido. No sé si me equivoco.

Puedes conseguir este efecto usando la propiedad float: left por ejemplo en las capas de dentro y a la capa contenedora le pones overflow: hidden.

#footer { width:990px; height:auto; position:relative; margin:0 auto; background:#FFF; overflow: hidden; }
#footer_content1 { width: 470px; height:auto; background: #EEE; padding:10px; float: left; }
#footer_content2 { width: 470px; height:auto; background: #EEE; padding:10px; float: right; }

Saludos.

[JessicaTJ]

Lo ke pasa es ke no puedo usar floats ya que no me sirven para el fin ke requiero. Si necesitara como me comentas dakel es la solucion perfecta, pero no es asi, por ejemplo, lo ke necesito hacer es esto:



Como pueden ver no es un float, es posicionado por medio de "coordenadas" en pixeles, el #footer_contentX nada mas lo puse como ejemplo si se le kiere agregar otro div al footer, el footer debe de tomar el tamanio de forma automatica sin necesidad de darle un height "predefinido" el width si es predefinido, asi que por eso no hay problema, el problema es el height.

[rzkgraphics]

Iniciado por JessicaTJ

Lo ke pasa es ke no puedo usar floats ya que no me sirven para el fin ke requiero. Si necesitara como me comentas dakel es la solucion perfecta, pero no es asi, por ejemplo, lo ke necesito hacer es esto:

[URL=http://img530.imageshack.us/i/ejemploi.jpg/][IMG]http://img530.imageshack.us/img530/8240/ejemploi.jpg[/IMG][/URL]

Como pueden ver no es un float, es posicionado por medio de "coordenadas" en pixeles, el #footer_contentX nada mas lo puse como ejemplo si se le kiere agregar otro div al footer, el footer debe de tomar el tamanio de forma automatica sin necesidad de darle un height "predefinido" el width si es predefinido, asi que por eso no hay problema, el problema es el height.

Siempre he busco lo mismo, pero no he encontrado respuesta, la verdad es que solo llegué a la conclusion de que sino usas %(porcentajes, varía el diseño) deberias de usar OVERFLOW: AUTO para que te ponga la barra de desplazamiento, de ahí no hay de otra. ( opto por overflow )

[kseso?]

Desea conseguir algo como:


¿Sí?
Entonces mire a ver si puede adaptar el siguiente ejemplo:
http://bit.ly/bxwBRc
Sin flotados, ni posiciones absolutas, el padre crece automáticamente sin necesidad de overflow...
SI tiene alguna duda, no dude... en consultar