En el marcado de este documento el orden de los bloques es: Contenido 1, contenido 2 y contenido 3.
Para conseguir el layout de este ejemplo se ha utilizado el siguiente código en la css:
#contenido1,
#contenido2,
#contenido3 {
position: relative;
float: left;
}
#contenido1 {
width: 100%;
margin-right: -250px;
}
#contenido1 * {
margin-right: 250px;
}
#contenido1 * * {
margin-right: 0;
}
#contenido2 {
width: 150px;
}
#contenido3 {
width: 100px;
}
Como en este caso no se puede controlar la suma total de los anchos de los tres bloques, al bloque principal se le da el 100% del ancho del body. El siguiente bloque, al estar flotado se trataría de colocar a la derecha de este, pero al ocupar el 100% y no quedar sitio para él, salta a la siguiente línea. Para conseguir que esto no pase es necesario crear el espacio necesario para que quepa. Esto se consigue dándole al margen derecho del primer bloque un valor negativo. Su ancho sigue siendo el 100%, pero al darle un margen negativo a su derecha, creamos un espacio que puede ocupar el siguiente bloque. Si es suficientemente amplio dicho margen, podremos situar no sólo el segundo bloque, sino también el tercero.
El contenido del primer bloque seguiría ocupando el 100% del body, con lo que para que no quede debajo de los otros dos, le damos a el margen derecho necesario para ello. Dado que no todos los navegadores interpretan correctamente el selector ":first-child", recurrimos al selector universal (ya comentado anteriormente en el desarrollo del artículo)
Es necesario recordar que se podrían producir efectos no deseados al poner bordes laterales a los bloques.
Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido.
Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido. Rígido.
Este es el pie del documento. Generalmente incluye información adicional acerca del propio documento o del sitio web.