Problema con height del div principal

[ivancalva]

Que tal, estoy haciendo un rediseño de mi pagina web y me he topado con un problema, en mi pagina tengo un div el cual tiene dentro todo el contenido de la web #contenido_principal con el siguiente codigo

Código:

#contenido_principal{
	width: 981px;
	background-image:url(../images/fondo_contenido_principal.jpg);
	margin:0 auto;
	padding:0;
	height:auto;
	-webkit-box-shadow: 0 0 10px rgb(0,0,0);
	-moz-box-shadow: 0 0 10px rgb(0,0,0);
	box-shadow: 0 0 10px rgb(0,0,0);
}

En mi pagina utilizo la division contenido principal e inserto todo el codigo dentro de ella, pero el problema es que el fondo no ocupa toda la pagina

La pagina en cuestion es http://www.k-pop.com.mx/newdesign/

la url de mi hoja de estilos es http://www.k-pop.com.mx/newdesign/css/estilo.css

Como pueden ver la division no se muestra correctamente y el footer se muestra justo despues del slider, cuando edito la altura por una fija como 1900px; si funiona, alguien que me pueda ayudar a descubrir por que es que pasa este error.

Soy aun muy novato en CSS y me he basado en los tutoriales de w3schools y otros que he encontrado en google.

[C2am]

Recuerda que si tienes elementos flotados en el interior del contenedor debes limpiar los float

Saludos

[ivancalva]

Hola C2am, he agregado la propiedad de overflow= hidden; y height= 1%; Pero como podras ver en mi pagina aun no se muestra todo el contenido, el contenido del contenido_derecha, es cortado :( a que se puede deber esto?

[furoya]

No miré tu código fuente, pero me parece que no está "cortado" sino "tapado" por el bloque violeta. Porque no ocupa espacio en el otro contenedor.

Puede que esto te sirva de modelo para trabajar.

(AYUDA) Escalar div con imagen (no de fondo) segun resolucion de pantalla

(Por si no lo habías visto antes.)

[ivancalva]

Hola, el bloque violeta es el footer, pero despues de la parte donde salen los numeros entre el circulo rosa, todavia hay otros 2 bloques mas y deberia bajar mucho mas :(. sobre el tema, que pusiste es para un diseño responsivo no? O que es lo que deberia de ver en el?

[C2am]

Tal vez sea por esto:

Código CSS:

#contenido_principal #contenido_derecha {
margin: 30px 0px;
width: 330px;
float: left;
 
height: 500px; /* TIENES DEFINIDA UNA ALTURA MENOR A LA QUE OCUPA SU CONTENIDO*/
 

SALUDOS

[ivancalva]

C2am Muchisimas gracias, ese era el error, al comenzar el diseño como no tenia contendio las divisiones les dejaba una altura fija, me olvide de cambiarla Muchas gracias por tu ayuda!

[chrishxc]

Iniciado por C2am

Recuerda que si tienes elementos flotados en el interior del contenedor debes limpiar los float

Saludos

No lo sabía esto!!
Overflow:hidden pq??¿¿?

Ya imaginaba que usar un div vacío era una "chapuza"... pero no le veo el motivo del porque un div con el overflow sí coge la forma de los div flotantes.

[mariogl84]

La solución más aceptada actualmente si quieres que funcione en todos los navegadores es:

Código:

.group:before,
.group:after {
    content: "";
    display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

Siendo .group el elemento contenedor de los elementos flotantes.

La explicación, aquí: http://nicolasgallagher.com/micro-clearfix-hack/

[furoya]

Iniciado por ivancalva

... sobre el tema, que pusiste es para un diseño responsivo no? O que es lo que deberia de ver en el?

No, bueno, en principio sí; pero el verdadero tema ahí era ubicar un pie de página debajo de todo.
Igual ya no importa. No te preocupés.

Iniciado por mariogl84

La solución más aceptada actualmente si quieres que funcione en todos los navegadores es:

Código:

.group:before, .group:after {
    content: "";
    display: table;
}

Me parece que aquí tenemos otro problema.
Resulta que usar tablas para maquetar no está muy bien visto. El hecho de que se usen desde CSS no quita el hecho de que estamos metiendo tablas. Y sin filas, columnas, ni celdas; que es algo que en HTML se considera una chanchada.
Quiero decir, que no deberíamos usar <table> sin sus correspondientes <tbody> , <tr> y <td>. El hecho de que el navegador "completa" lo que falta, no es excusa.

Y por una cuestión de concepto, en CSS debería ser igual. No habría que usar tablas para "fozar saltos" en el documento.

Por supuesto, si no hay otra forma, se usan. Tampoco vamos a ser los fundamentalistas de la semántica. Y más teniendo en cuenta que para lo único que les importa la semántica a los desarrolladores es por cuestiones de "SEO". (Y de momento, creo que aún las máquinas de posicionamiento no revisan más que algunas etiquetas HTML, el CSS lo ignoran.)

[mariogl84]

Hola, furoya.

No es un problema usar display:table, ya que el css determina cómo se verán las cosas en el navegador, y por tanto estamos fuera del campo de la semántica. Un problema semántico sería usar tables en el html sin estar tabulando datos, es decir, usarlas para posicionar elementos en la página, que es lo que se hacía antes y lo que hemos desechado (afortunadamente).

Esta implementación del clearfix está ampliamente aceptada por la comunidad, y es la que llevan, por ejemplo, las últimas versiones de Bootstrap y HTML5 Boilerplate.

En cualquier caso, en la misma página el autor dice que el display:table se puede sustituir por display:block en caso de no usar el :before para evitar los márgenes colapsados, así que también se puede implementar con display:block en vez de table.

Saludos.

[mariogl84]

De todos modos, independientemente de nuestras diferencias en cuanto a si usar o no el display:table, creo que estamos todos de acuerdo en que poner un div vacío en el html es peor que usar alguna de estas soluciones CSS, ¿no?

[furoya]

Iniciado por mariogl84

No es un problema usar display:table, ya que el css determina cómo se verán las cosas en el navegador, y por tanto estamos fuera del campo de la semántica. Un problema semántico sería usar tables en el html sin estar tabulando datos, es decir, usarlas para posicionar elementos en la página, que es lo que se hacía antes y lo que hemos desechado (afortunadamente).

Eso de que el CSS es "de vista" mientras que el HTML es "de cuerpo" terminó siendo bastante relativo. Hubo muchas discusiones sobre el tópico.
Pero creo que se acabaron cuando apareció content. Ahora CSS mete elementos en la página. Y parece que también fuerza al navegador a completar los que faltan; no lo probé, pero si al crear un elemento de tabla con CSS, se crea un elemento de celda en su interior, ya no hay discusión : es una tabla, y no se usa para maquetar. Porque ese salto o espaciado, es maquetación y no tabulado.


Esta implementación del clearfix está ampliamente aceptada por la comunidad, y es la que llevan, por ejemplo, las últimas versiones de Bootstrap y HTML5 Boilerplate.

No me lo tomés a mal, pero lo que acepten otros ne nefrega. A mi me interesa lo que está bien, o mal. Por eso expongo razones.


En cualquier caso, en la misma página el autor dice que el display:table se puede sustituir por display:block en caso de no usar el :before para evitar los márgenes colapsados, así que también se puede implementar con display:block en vez de table.

Pero sí, por supuesto. Seguro mencioné esa salvedad. Y si no lo puse antes, es porque me olvidé. Soy el primero en aceptar que las cosas se hacen "como se debe", mientras se puede. Cuando no, hasta te maqueto con tablas HTML. Si hay que mandar un div para saltar un flotado, se manda.

Iniciado por mariogl84

De todos modos, independientemente de nuestras diferencias en cuanto a si usar o no el display:table, creo que estamos todos de acuerdo en que poner un div vacío en el html es peor que usar alguna de estas soluciones CSS, ¿no?

Qué se yo. Como dije recién, "la necesidad tiene cara de hereje". Si lo tenemos que usar, lo usamos. Mi punto es que se entienda que no es gratis, que en verdad si nos ponemos en exquisitos para usar una tabla sin tabular datos, acá tendríamos que hacer lo mismo.
Es parecido al caso del que usa display:table en un bloque para alinear texto verticalmente, y se siente exculpado solamente porque no pone la etiqueta <table>. Está haciendo lo mismo, o peor, porque a la etiqueta seguro que le agrega las filas y celdas, pero con css siempre se lo olvidan. Y no se pone una tabla sin celdas.