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-left: -150px;
margin-right: -20%
}
#contenido1 * {
margin-right: 20%;
margin-left: 150px;
}
#contenido1 * * {
margin-right: 0;
margin-left: 0;
}
#contenido2 {
width: 20%;
}
#contenido3 {
width: 150px;
}
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. Al estar flotados a la izquierda todos los bloques, los siguientes tratarían de colocarse a la derecha del primero, pero al ocupar este el 100% del body, no caben, con lo que saltan a la siguiente línea. Para evitarlo, basta con crear el espacio necesario para que quepan. Esto se consigue dando valores negativos al margen del primer bloque. ¿Cuánto margen negativo? El ancho de los dos bloques. Como no se pueden sumar sus anchos, damos uno de los valores al margen iquierdo del primer bloque y el otro al derecho.
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 los márgenes necesarios 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.
Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido. Fluido.
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. 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.