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;
}
#contenido1 {
float: left;
width: 100%;
margin-right: -35%;
}
#contenido1 * {
margin-right: 35%;
}
#contenido1 * * {
margin-right: 0;
}
#contenido2 {
width: 20%;
float: right;
}
#contenido3 {
width: 20%;
float: left;
}
El ancho de los tres bloques suma el 100% del ancho del body. Para el layout es básicamente igual que el del ejemplo 1-2-3 fluido, alterando el flotado de los bloques 2 y 3 para invertir su posición.
En Internet Explorer pudiera ocurrir que al redimensionar la ventana el último bloque saltase a la línea inferior. Este efecto no deseado (ya comentado anteriormente) se podría evitar disminuyendo en una décima una de las dimensiones.
Así mismo, 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. 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.
Este es el pie del documento. Generalmente incluye información adicional acerca del propio documento o del sitio web.