Colonne 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan aliquam sem sed fringilla. Vivamus consequat purus est, ac luctus augue pretium elementum. Phasellus ultrices nunc vitae orci blandit, a vulputate erat tristique. Pellentesque gravida convallis nulla sed commodo. Integer id sagittis nibh. Aliquam a porttitor tortor, vitae venenatis nunc. Aliquam erat volutpat. Suspendisse tempus semper finibus. Vivamus pretium mattis neque, quis sollicitudin ligula fringilla eu. Phasellus blandit tempor tellus id sodales. Etiam et nibh est. Aenean sed mi euismod, aliquet lorem feugiat, luctus odio. Ut laoreet mi in metus porttitor fringilla.

Sed quis fringilla urna. Etiam non nisl vel dolor ullamcorper posuere. Aliquam tortor erat, consequat a elit sit amet, mollis laoreet est. Duis non luctus arcu. Mauris finibus id ante in suscipit. Vivamus scelerisque non sapien vel malesuada. Donec condimentum orci at metus sagittis, et maximus sem feugiat.

Duis eget libero sem. Pellentesque at sem tristique, iaculis odio vel, iaculis eros. Phasellus hendrerit, eros sed rutrum blandit, urna mi gravida lectus, eget pellentesque orci neque id ipsum. In enim odio, hendrerit ut condimentum vel, mattis et nisl. Nulla erat ipsum, posuere sit amet nisi aliquam, dictum iaculis purus. Aenean dui orci, efficitur bibendum vehicula vel, consectetur ut nulla. Suspendisse nunc nunc, consequat et quam ac, vestibulum lacinia nibh. In sit amet lectus ac purus ultrices facilisis vel ut enim. Morbi hendrerit interdum metus a scelerisque. Vivamus tempor facilisis velit vel feugiat. Fusce lobortis velit sed leo finibus, a lobortis ligula auctor.

Présentation fluide

Pour pallier ce genre de problème, on peut, depuis longtemps, travailler avec des largeurs relatives (%) plutôt que des largeurs fixes (pixels) pour définir les composants d’une page.

On obtient alors un effet élastique sur les objets qui occupent toujours toute la largeur de l’écran ou de la page du site.

Principe : la disposition des composants de la page et leurs contenus ne changent pas. Seules les largeurs des contenants se réduisent proportionnellement les unes par rapport aux autres.

Inconvénient : les textes se redistribuent dans leurs contenants sans qu’on puisse vraiment en contrôler les coupures, ce qui peut donner des résultats inesthétiques, voire aberrants, sur des écrans peu larges.

Colonne 2a

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan aliquam sem sed fringilla. Vivamus consequat purus est, ac luctus augue pretium elementum. Phasellus ultrices nunc vitae orci blandit, a vulputate erat tristique. Pellentesque gravida convallis nulla sed commodo. Integer id sagittis nibh. Aliquam a porttitor tortor, vitae venenatis nunc. Aliquam erat volutpat. Suspendisse tempus semper finibus. Vivamus pretium mattis neque, quis sollicitudin ligula fringilla eu. Phasellus blandit tempor tellus id sodales. Etiam et nibh est. Aenean sed mi euismod, aliquet lorem feugiat, luctus odio. Ut laoreet mi in metus porttitor fringilla.

Colonne 2b

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan aliquam sem sed fringilla. Vivamus consequat purus est, ac luctus augue pretium elementum. Phasellus ultrices nunc vitae orci blandit, a vulputate erat tristique. Pellentesque gravida convallis nulla sed commodo. Integer id sagittis nibh. Aliquam a porttitor tortor, vitae venenatis nunc. Aliquam erat volutpat. Suspendisse tempus semper finibus. Vivamus pretium mattis neque, quis sollicitudin ligula fringilla eu. Phasellus blandit tempor tellus id sodales. Etiam et nibh est. Aenean sed mi euismod, aliquet lorem feugiat, luctus odio. Ut laoreet mi in metus porttitor fringilla.

Colonne 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan aliquam sem sed fringilla. Vivamus consequat purus est, ac luctus augue pretium elementum. Phasellus ultrices nunc vitae orci blandit, a vulputate erat tristique. Pellentesque gravida convallis nulla sed commodo. Integer id sagittis nibh. Aliquam a porttitor tortor, vitae venenatis nunc. Aliquam erat volutpat. Suspendisse tempus semper finibus. Vivamus pretium mattis neque, quis sollicitudin ligula fringilla eu. Phasellus blandit tempor tellus id sodales. Etiam et nibh est. Aenean sed mi euismod, aliquet lorem feugiat, luctus odio. Ut laoreet mi in metus porttitor fringilla.

Sed quis fringilla urna. Etiam non nisl vel dolor ullamcorper posuere. Aliquam tortor erat, consequat a elit sit amet, mollis laoreet est. Duis non luctus arcu. Mauris finibus id ante in suscipit. Vivamus scelerisque non sapien vel malesuada. Donec condimentum orci at metus sagittis, et maximus sem feugiat.

Duis eget libero sem. Pellentesque at sem tristique, iaculis odio vel, iaculis eros. Phasellus hendrerit, eros sed rutrum blandit, urna mi gravida lectus, eget pellentesque orci neque id ipsum. In enim odio, hendrerit ut condimentum vel, mattis et nisl. Nulla erat ipsum, posuere sit amet nisi aliquam, dictum iaculis purus. Aenean dui orci, efficitur bibendum vehicula vel, consectetur ut nulla. Suspendisse nunc nunc, consequat et quam ac, vestibulum lacinia nibh. In sit amet lectus ac purus ultrices facilisis vel ut enim. Morbi hendrerit interdum metus a scelerisque. Vivamus tempor facilisis velit vel feugiat. Fusce lobortis velit sed leo finibus, a lobortis ligula auctor.