Problema con div general (creo)

[Melehb]

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 ;)

[ArturoGallegos]

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%

[Melehb]

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?

[ArturoGallegos]

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

[Melehb]

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.

[ArturoGallegos]

Iniciado por Melehb

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:

<!-- Con float sin limpiar -->
<div style="width:500px;border:1px #333 solid;margin:auto;padding:10px;">
    <div>Demo</div>
    <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>
    <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>
</div>
 

Código HTML:

<!-- limpiar float metodo 1 (recomendado) -->
<div style="width:500px;border:1px #333 solid;margin:auto;padding:10px;overflow:hidden;">
    <div>Demo</div>
    <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>
    <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>
</div>
 

Código HTML:

<!-- limpiar float metodo 2 -->
<div style="width:500px;border:1px #333 solid;margin:auto;padding:10px;">
    <div>Demo</div>
    <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>
    <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>
    <div style="clear:both;">.</div>
</div>
 

y por favor pase a leer los libros de XHTML y CSS -> clic aquí

[Melehb]

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!

[Melehb]

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

[jomaruro]

Hola:

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

Date una vueltecita por www.librosweb.es

Saludos.