Foros del Web » Creando para Internet » CSS »

Div relativo y height auto

Estas en el tema de Div relativo y height auto en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/11/2010, 20:15
Avatar de JessicaTJ  
Fecha de Ingreso: enero-2007
Ubicación: 127.0.0.1
Mensajes: 469
Antigüedad: 10 años, 11 meses
Puntos: 25
Div relativo y height auto

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:
Ver original
  1. #footer { width:990px; height:auto; position:relative; margin:0 auto; background:#FFF; }
  2. #footer_content1 { width: 470px; height:auto; position:absolute; background: #EEE; padding:10px; }
  3. #footer_content2 { width: 470px; height:auto; position:absolute; background: #EEE; padding:10px; left:500px; }

Código HTML:
Ver original
  1. <div id="footer">
  2.     <div id="footer_content1">
  3.         123
  4.     </div>
  5.     <div id="footer_content2">
  6.         456
  7.     </div>
  8. </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 !!!
__________________
٩(͡๏̯͡๏)۶ || SkyDesigns || ٩(͡๏̯͡๏)۶
  #2 (permalink)  
Antiguo 24/11/2010, 15:06
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Div relativo y height auto

Hola:

Prueba con overflow:auto.

Saludos.

  #3 (permalink)  
Antiguo 25/11/2010, 11:50
 
Fecha de Ingreso: septiembre-2010
Mensajes: 525
Antigüedad: 7 años, 2 meses
Puntos: 59
Hola. El problema es que los 2 divs son position:absolute; , pon position:relative; y entonces deberia funcionar.

Saludos
  #4 (permalink)  
Antiguo 26/11/2010, 21:25
Avatar de JessicaTJ  
Fecha de Ingreso: enero-2007
Ubicación: 127.0.0.1
Mensajes: 469
Antigüedad: 10 años, 11 meses
Puntos: 25
Respuesta: Div relativo y height auto

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:
Ver original
  1. <div style="width:1000px; height:auto; margin:0 auto;">
  2.   <div style="width:600px; position:relative; left:200px; height:auto;">
  3.     <div style="position:relative; left:100px; height:auto; top:0px; width:50px;">
  4.             123<br />123<br />123<br />123
  5.       </div>
  6.         <div style="position:relative; left:200px; top:0px; height:auto; width:50px;">
  7.             456<br />456<br />456<br />123
  8.       </div>
  9.   </div>
  10. </div>

Alguna otra idea chicos?
__________________
٩(͡๏̯͡๏)۶ || SkyDesigns || ٩(͡๏̯͡๏)۶
  #5 (permalink)  
Antiguo 26/11/2010, 21:43
 
Fecha de Ingreso: noviembre-2010
Ubicación: On a world of Anime & Web.
Mensajes: 137
Antigüedad: 7 años
Puntos: 4
Respuesta: Div relativo y height auto

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.
  #6 (permalink)  
Antiguo 27/11/2010, 23:46
Avatar de JessicaTJ  
Fecha de Ingreso: enero-2007
Ubicación: 127.0.0.1
Mensajes: 469
Antigüedad: 10 años, 11 meses
Puntos: 25
Respuesta: Div relativo y height auto

Cita:
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 :(

Cita:
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 :(
__________________
٩(͡๏̯͡๏)۶ || SkyDesigns || ٩(͡๏̯͡๏)۶
  #7 (permalink)  
Antiguo 28/11/2010, 09:04
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Div relativo y height auto

Cita:
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
  #8 (permalink)  
Antiguo 28/11/2010, 22:04
Avatar de JessicaTJ  
Fecha de Ingreso: enero-2007
Ubicación: 127.0.0.1
Mensajes: 469
Antigüedad: 10 años, 11 meses
Puntos: 25
Respuesta: Div relativo y height auto

Cita:
Iniciado por kseso? Ver Mensaje
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?
__________________
٩(͡๏̯͡๏)۶ || SkyDesigns || ٩(͡๏̯͡๏)۶
  #9 (permalink)  
Antiguo 28/11/2010, 22:21
Avatar de rzkgraphics  
Fecha de Ingreso: noviembre-2010
Mensajes: 61
Antigüedad: 7 años
Puntos: 2
Respuesta: Div relativo y height auto

Cita:
Iniciado por JessicaTJ Ver Mensaje
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:
Ver original
  1. #footer { width:990px; height:auto; position:relative; margin:0 auto; background:#FFF; }
  2. #footer_content1 { width: 470px; height:auto; position:absolute; background: #EEE; padding:10px; }
  3. #footer_content2 { width: 470px; height:auto; position:absolute; background: #EEE; padding:10px; left:500px; }

Código HTML:
Ver original
  1. <div id="footer">
  2.     <div id="footer_content1">
  3.         123
  4.     </div>
  5.     <div id="footer_content2">
  6.         456
  7.     </div>
  8. </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 )
  #10 (permalink)  
Antiguo 29/11/2010, 06:49
 
Fecha de Ingreso: noviembre-2010
Mensajes: 1
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Div relativo y height auto

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.

Última edición por dakel; 29/11/2010 a las 06:55
  #11 (permalink)  
Antiguo 30/11/2010, 15:39
Avatar de JessicaTJ  
Fecha de Ingreso: enero-2007
Ubicación: 127.0.0.1
Mensajes: 469
Antigüedad: 10 años, 11 meses
Puntos: 25
Respuesta: Div relativo y height auto

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.
__________________
٩(͡๏̯͡๏)۶ || SkyDesigns || ٩(͡๏̯͡๏)۶
  #12 (permalink)  
Antiguo 30/11/2010, 15:42
Avatar de rzkgraphics  
Fecha de Ingreso: noviembre-2010
Mensajes: 61
Antigüedad: 7 años
Puntos: 2
Respuesta: Div relativo y height auto

Cita:
Iniciado por JessicaTJ Ver Mensaje
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 )
  #13 (permalink)  
Antiguo 30/11/2010, 18:07
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Div relativo y height auto

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

Etiquetas: auto, height, relativo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:35.