Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Colocar divisón a bajo de otra división

Estas en el tema de Colocar divisón a bajo de otra división en el foro de CSS en Foros del Web. Hola a todxs. Finalmente he decidido pedir ayuda mediante una entrada porque no logro encontrar lo que necesito. Tengo estas capas: Código: .wrapper{ width: 100% ...
  #1 (permalink)  
Antiguo 22/11/2014, 17:39
 
Fecha de Ingreso: octubre-2014
Mensajes: 25
Antigüedad: 9 años, 4 meses
Puntos: 0
Pregunta Colocar divisón a bajo de otra división

Hola a todxs. Finalmente he decidido pedir ayuda mediante una entrada porque no logro encontrar lo que necesito.

Tengo estas capas:

Código:
.wrapper{
 width: 100%
 clear:both
 max-width: 1600px;
 box-sizing: border-box;
 padding: 0 150px 0 150px;
 background: #cccccc;
}

.cuerpo-izq{
 width:53%;
 float:left;
 margin-top: 20px;
 margin-bottom:20px;
 box-sizing: border-box;
 padding:1px;
 background: #a68da0;
 -webkit-column-count: 2; /* Chrome, Safari, Opera */
 -moz-column-count: 2; /* Firefox */
 column-count: 2;
}

.cuerpo-der{
 width:45%;
 right: 0;
 float:right;
 margin-top: 20px;
 margin-bottom:20px;
 box-sizing: border-box;
 padding:1px;
 background: #b3e860;
}

.divimagen{
 width: 100%
 clear:both
 max-width: 1600px;
 box-sizing: border-box;
 padding: 0;
 margin: 10px 0 10px 0;
 background: #123456;
}
Dentro de la capa .wrapper entran la capa .cuerpo-izq y .cuerpo-der, para crear dos columnas independientes. Cómo pueden ver, en la capa wrapper hago que tengan un espacio en los lados. Cree la capa .divimagen para agregar imágenes apaisadas que ocupen el 100% del ancho de pantalla, y la situo fuera de la capa wrapper, pero lo que me sucede es que .divimagen se me situa debajo de .cuerpo-izq y .cuerpo-der.

Quisiera poder usar estas capas a mi libre albedrío, indistintamente si situo .divimagen y luego .wrapper y luego otra vez .divimagen, y así infinitamente, pero lo que quiero conseguir es que estas capas hagan que la siguiente capa que se coloca debajo quede debajo y no detrás, pero no sé cómo hacerlo... :(

¡Espero haberme explicado bien y que me puedan ayudar!

Muchas gracias
  #2 (permalink)  
Antiguo 22/11/2014, 20:58
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Colocar divisón a bajo de otra división

Tienes que usar algún tipo de clearfix. Este es el más simplón y rápido:

.
Código CSS:
Ver original
  1. wrapper {
  2.   overflow: hidden;
  3. }
__________________
(:
  #3 (permalink)  
Antiguo 23/11/2014, 09:49
 
Fecha de Ingreso: octubre-2014
Mensajes: 25
Antigüedad: 9 años, 4 meses
Puntos: 0
De acuerdo Respuesta: Colocar divisón a bajo de otra división

Hola pzin, pero yo tengo entendido que el overflow es para el contenido interior de los divisores y no para la posición de estos ¿? Con overfow:hidden entiendo que el contenido que se salga del heigh (que no tiene ninguno de los divisores) no se mostrará.

De todas maneras voy a probar y ahora te comento... ¿En principio sólo debo ponerlo en la capa wrapper, o en la capa divimagen también?

Gracias :)


***Edito:***

¡¡¡Vale!!! Me funcionó :D ¿Ahora alguien me puede explicar por qué?

Mil gracias pzin

Última edición por Llunetica; 23/11/2014 a las 10:07

Etiquetas: abajo, division, maquetacion
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:10.