Foros del Web » Creando para Internet » HTML »

Problema con div general (creo)

Estas en el tema de Problema con div general (creo) en el foro de HTML en Foros del Web. Buenas Os dejo un boceto de más o menos como es el esquema de la web que estoy haciendo. (Creo que a lo mejor se ...
  #1 (permalink)  
Antiguo 25/08/2011, 13:00
 
Fecha de Ingreso: febrero-2010
Mensajes: 18
Antigüedad: 14 años
Puntos: 1
Problema con div general (creo)

Buenas

Os dejo un boceto de más o menos como es el esquema de la web que estoy haciendo.



(Creo que a lo mejor se ve un poco pequeña)

Resumiendo, se trata de una web con un contenedor general que engloba todo el contenido de la web. Dentro de ese contenedor principal se divide en otros dos divs: columna izquierda y derecha.

En la izquierda esta la cabecera, y en la derecha es donde iria el contenido.

El div general tiene un ancho fijo y una altura de 100%, al igual que los otros dos div dentro del mismo.

Cada columna como veis tiene un color de fondo plano, pero el problema esta cuando meto demasiada información en el apartado de contenido... cuando eso ocurre parece como que se sale de la web, cuando en realidad la estructura esta perfectamente, unos divs dentro de otros.

Queda algo así:



Cuando eso ocurre pasa como podeis ver en la imagen, es como si el div general por alguna razón no llegase hasta el final de la pantalla... Mi idea es esa, que el div llegue siempre hasta abajo, meta el contenido que meta, sea largo o corto, pero que no se me salga de ese modo.



¿Cómo podría solucionar esto?

Gracias de antemano ;)
  #2 (permalink)  
Antiguo 25/08/2011, 14:24
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años
Puntos: 1146
Respuesta: Problema con div general (creo)

sin ver tu código intentare adivinar ñ.ñ al div principal le has puesto height:100%

de ser así tu problema radica en eso, al especificar una altura tu contenedor la respeta sin importar su contenido y el 100% siempre es en base a la ventana de tu navegador...

posible solución: en lugar de height:100% utiliza min-height:100%
  #3 (permalink)  
Antiguo 25/08/2011, 14:56
 
Fecha de Ingreso: febrero-2010
Mensajes: 18
Antigüedad: 14 años
Puntos: 1
Respuesta: Problema con div general (creo)

Aquí dejo los datos del css:

#general {width:860px; height:100%; position:absolute; left:50%; margin-left:-430px; background:#FFF; box-shadow: 0 0 10px #000;}

#izquierda {width:210px; height:100%; background:#658c93; float:left;}

#derecha {width:635px; height:100%; background:#FFF; float:left; padding-left:12px;}

Es que claro cuando hay mas contenido de la cuenta me sale la barra de scroll y al moverlo hacia abajo para seguir leyendo es cuando se ve el fallo...

De todos modos esa etiqueta que mencionas no la recuerdo haber visto, que se supone exactamente?
  #4 (permalink)  
Antiguo 25/08/2011, 15:01
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años
Puntos: 1146
Respuesta: Problema con div general (creo)

si no la has visto, creo que te hace falta echarte una repasada de CSS

-> clic aquí

y si precisamente con esa propiedad puedes solventar ese fallo que mencionas

aparte por lo que veo te falta limpiar los floats también puede ser una causa para que tu div padre no creesca tanto como los hijos, agrega overflow:hidden para el problema de los floats
  #5 (permalink)  
Antiguo 25/08/2011, 15:34
 
Fecha de Ingreso: febrero-2010
Mensajes: 18
Antigüedad: 14 años
Puntos: 1
Respuesta: Problema con div general (creo)

Lo que pasa que los float son necesarios... es decir, si los quitase el div derecho se pondría bajo el izquierdo no al lado.
  #6 (permalink)  
Antiguo 25/08/2011, 15:53
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años
Puntos: 1146
Respuesta: Problema con div general (creo)

Cita:
Iniciado por Melehb Ver Mensaje
Lo que pasa que los float son necesarios... es decir, si los quitase el div derecho se pondría bajo el izquierdo no al lado.
ahora si me alegraste el día, veo que me mal interpretaste y no tienes idea que fue lo que dije

limpiar los float no quise decir que los eliminaras... te pongo este código meramente ilustrativo para ejemplificar lo que dije o quise decir
Código HTML:
Ver original
  1. <!-- Con float sin limpiar -->
  2. <div style="width:500px;border:1px #333 solid;margin:auto;padding:10px;">
  3.     <div>Demo</div>
  4.     <div style="width:150px;background:#fe0;float:left;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</div>
  5.     <div style="width:348px;background:#f00;float:right;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  6. </div>
Código HTML:
Ver original
  1. <!-- limpiar float metodo 1 (recomendado) -->
  2. <div style="width:500px;border:1px #333 solid;margin:auto;padding:10px;overflow:hidden;">
  3.     <div>Demo</div>
  4.     <div style="width:150px;background:#fe0;float:left;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</div>
  5.     <div style="width:348px;background:#f00;float:right;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  6. </div>
Código HTML:
Ver original
  1. <!-- limpiar float metodo 2 -->
  2. <div style="width:500px;border:1px #333 solid;margin:auto;padding:10px;">
  3.     <div>Demo</div>
  4.     <div style="width:150px;background:#fe0;float:left;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</div>
  5.     <div style="width:348px;background:#f00;float:right;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  6.     <div style="clear:both;">.</div>
  7. </div>

y por favor pase a leer los libros de XHTML y CSS -> clic aquí
  #7 (permalink)  
Antiguo 25/08/2011, 16:05
 
Fecha de Ingreso: febrero-2010
Mensajes: 18
Antigüedad: 14 años
Puntos: 1
Respuesta: Problema con div general (creo)

Am vale ya entendí, hace dos años o así que empecé a aprender web y la verdad que no había escuchado lo de "limpiar float" pero ya comprendí a que te refieres xD

¡Gracias por la ayuda!
  #8 (permalink)  
Antiguo 26/08/2011, 09:34
 
Fecha de Ingreso: febrero-2010
Mensajes: 18
Antigüedad: 14 años
Puntos: 1
Respuesta: Problema con div general (creo)

Ahora me ha pasado una cosa bastante extraña al añadir el overflow al contenedor principal, si se me corrigió el problema que tenia antes pero ahora la pagina esta totalmente congelada (estática).

Es decir aunque haya contenido no me sale la barra de scroll para bajar y subir, solo me deja ver la parte de la web que abarca la pantalla... :S

¿A que se puede deber esto?

(SOLUCIONADO) Ya me voy soltando finalmente después de muchos años sin tocarlos xD

Gracias de todos modos por la ayuda antes recibida
  #9 (permalink)  
Antiguo 28/08/2011, 02:31
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 meses
Puntos: 361
Respuesta: Problema con div general (creo)

Hola:

En lugar de overflow:hidden definelo como overflow:auto.

Date una vueltecita por www.librosweb.es

Saludos.


Etiquetas: contenido, general
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 04:08.