Página con posicionamiento fijo
Esta página está maquetada principalmente con posicionamiento fijo en las columnas laterales y la cabecera. Observa, que si desplazas el scroll hacia abajo, se mantienen en la misma posición.
En esta página, el ancho de los elementos es líquido, establecido en porcentajes. Comprueba que cambia si agrandas o estrechas el ancho de la ventana.
La cabecera tiene posicionamiento fijo, ubicada un 5% a la izquierda, con un ancho del 90%, lo que deja a la derecha el 5% restante.
El contenido central es una capa con un ancho líquido del 60% del tamaño de la ventana, y con margen lateral automático, para centrarlo. Además, hemos dejado un margen superior de 70px, lo mismo que el alto de la cabecera. Observa que nos queda un 40% de ventana libre, repartdido a cada lado.
La columna izquierda, la de los menús, tiene también posicionamiento fijo. Está situada un 5% a la izquierda, con un ancho del 15% (20% en total). La separación superior es igual al alto de la cabecera, 70px.
La columna derecha está como la izquierda, pero ubicada un 5% a la derecha en vez de a la izquierda.
Texto de ejemplo 2
Praesent ut ipsum. Nullam vitae nunc. Nam sit amet libero id mauris consectetur pulvinar. Suspendisse vulputate lorem quis lectus. Quisque commodo purus et nibh. Nunc quis mi quis risus hendrerit ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ac dui. Mauris vulputate fermentum tellus. Morbi rhoncus lorem id nibh.
Etiam cursus nulla ac purus. Pellentesque massa elit, dignissim et, volutpat eu, sagittis tristique, sem. Quisque nec leo. Etiam fringilla pellentesque turpis. Vestibulum at est. Sed sapien nunc, faucibus ac, suscipit sit amet, lacinia porttitor, mauris. Curabitur congue justo sed nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer tristique diam vitae ligula. Nulla tincidunt, metus sit amet congue porttitor, purus pede commodo odio, vel varius mauris nulla id augue. Mauris pellentesque volutpat lacus. Maecenas erat.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum volutpat, lacus non mattis vulputate, lorem nunc varius odio, in venenatis ante augue quis nisl. Praesent ut mi interdum lorem consequat vulputate. Vivamus ac urna non elit pellentesque sollicitudin. Nunc pharetra nibh in quam. Proin eu magna ut ligula volutpat mollis. Quisque mollis, nulla a porttitor commodo, orci diam commodo pede, ac congue neque libero quis justo. Donec sit amet ligula. In vehicula, elit ut pellentesque viverra, arcu nisl tincidunt ipsum, in viverra dui orci vel massa. Nunc tincidunt congue risus. Donec nec sem id elit egestas porttitor. Fusce ultrices nulla.
Texto de ejemplo 3
Praesent ut ipsum. Nullam vitae nunc. Nam sit amet libero id mauris consectetur pulvinar. Suspendisse vulputate lorem quis lectus. Quisque commodo purus et nibh. Nunc quis mi quis risus hendrerit ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ac dui. Mauris vulputate fermentum tellus. Morbi rhoncus lorem id nibh.
Etiam cursus nulla ac purus. Pellentesque massa elit, dignissim et, volutpat eu, sagittis tristique, sem. Quisque nec leo. Etiam fringilla pellentesque turpis. Vestibulum at est. Sed sapien nunc, faucibus ac, suscipit sit amet, lacinia porttitor, mauris. Curabitur congue justo sed nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer tristique diam vitae ligula. Nulla tincidunt, metus sit amet congue porttitor, purus pede commodo odio, vel varius mauris nulla id augue. Mauris pellentesque volutpat lacus. Maecenas erat.
Texto de ejemplo 4
Praesent ut ipsum. Nullam vitae nunc. Nam sit amet libero id mauris consectetur pulvinar. Suspendisse vulputate lorem quis lectus. Quisque commodo purus et nibh. Nunc quis mi quis risus hendrerit ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ac dui. Mauris vulputate fermentum tellus. Morbi rhoncus lorem id nibh.
Etiam cursus nulla ac purus. Pellentesque massa elit, dignissim et, volutpat eu, sagittis tristique, sem. Quisque nec leo. Etiam fringilla pellentesque turpis. Vestibulum at est. Sed sapien nunc, faucibus ac, suscipit sit amet, lacinia porttitor, mauris. Curabitur congue justo sed nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer tristique diam vitae ligula. Nulla tincidunt, metus sit amet congue porttitor, purus pede commodo odio, vel varius mauris nulla id augue. Mauris pellentesque volutpat lacus. Maecenas erat.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum volutpat, lacus non mattis vulputate, lorem nunc varius odio, in venenatis ante augue quis nisl. Praesent ut mi interdum lorem consequat vulputate. Vivamus ac urna non elit pellentesque sollicitudin. Nunc pharetra nibh in quam. Proin eu magna ut ligula volutpat mollis. Quisque mollis, nulla a porttitor commodo, orci diam commodo pede, ac congue neque libero quis justo. Donec sit amet ligula. In vehicula, elit ut pellentesque viverra, arcu nisl tincidunt ipsum, in viverra dui orci vel massa. Nunc tincidunt congue risus. Donec nec sem id elit egestas porttitor. Fusce ultrices nulla.