Tengo estas capas:
Código:
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..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; }
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