<div id="top">

J. Blustein

Web-centric Computing

Some Example Code

Example of a Layout Problem With CSS

Extra Text To Make Webpage Long

Lorem ipsum dolor sit amet, posuere elit elit, duis ut sit nec, in nunc semper tincidunt neque. Arcu gravida quis libero diam, mauris nunc a cum condimentum, ut voluptatem penatibus eros tellus est enim. Vehicula sed. Quam posuere ipsum eleifend eleifend amet, dis at scelerisque condimentum, perferendis varius consequat ornare fermentum fusce, sagittis lectus metus, montes ipsum. Posuere mi non aliquam ut pellentesque. Orci enim velit consectetuer laoreet elit ante, pretium est rhoncus purus. Molestie nonummy, facilisis in quam odio, nonummy enim sed nulla amet molestie augue, morbi elit sagittis magna ridiculus mauris. Porttitor eget, faucibus rem mollis, a faucibus, elit sed fringilla a maecenas nonummy. Id duis urna, nulla mauris urna urna, aenean pede pellentesque sed et magna amet.

Et volutpat morbi nunc accumsan nec, nec tincidunt delectus vestibulum nunc in, suspendisse est ultricies mattis quis vitae ligula, morbi lectus feugiat in tellus elit, malesuada mi nec urna gravida ut. Sagittis fermentum mauris iaculis hendrerit eget tincidunt, wisi in vitae non id mauris ipsum, pretium eros aliquam pede aenean lectus, facilisis nec dictum eget eu est eros. Aliquam suspendisse sed amet nulla suspendisse, in sit pharetra massa fringilla nulla, eros fames cursus sit semper dui imperdiet, ac consectetuer non magna viverra sed maecenas. Ante posuere turpis eget facilisis quis, in accumsan nullam libero nisi pellentesque, sed vel mauris elit consectetuer sollicitudin, nec lobortis pellentesque dolor lacus iaculis.

Aenean sociis dolor rutrum. Purus sed penatibus a sodales facilisi, lorem aliquet, eu arcu lorem commodo, velit diam amet urna. Neque sit orci purus ut, nascetur convallis eleifend rhoncus lacus cras, in massa tincidunt. Integer etiam suspendisse facilisi porttitor non, suspendisse diam nullam ac. Eu eget vestibulum. Duis dui commodo purus, soluta in dolor quis dui et, est ut vestibulum phasellus mauris, pellentesque maecenas dolor justo mauris felis. Non pellentesque, a sem in sed.

Tellus rhoncus leo wisi risus vitae dignissim, arcu rhoncus et parturient vel velit, eget amet in turpis, tincidunt enim integer hac feugiat. Ipsum ad risus ut wisi proin. A tellus, mollis urna in eros ut ante, volutpat enim fugiat erat hac, urna ut auctor natoque. Donec et eget gravida, risus pretium nunc sollicitudin quis, mattis ipsum pede ut nibh mauris morbi. Molestie montes etiam, donec mattis ut diam lobortis. Magnis lacus ullamcorper mus diam viverra, purus culpa aliquam mauris tincidunt, ac penatibus, malesuada est interdum erat sed feugiat est. Consectetuer ultricies et consequat nunc sapien tellus, ac quia ac et donec, enim sit lobortis.

Tincidunt cras ultricies pulvinar. In justo lacus orci cursus et sapien, elit et, vulputate in, vulputate lectus dapibus. Tincidunt ullamcorper aenean ut, sapien justo tortor sed integer neque consequat, aliquam eget integer rhoncus cum, sed augue libero semper. Ac convallis quis quis vel quis. In dignissim erat ut proin vestibulum. Orci eros interdum amet lacinia, lorem urna dolor. Dolor libero ut at mauris. Non mattis ultrices et vitae scelerisque et, etiam vestibulum vel erat. Odio vel taciti suscipit habitasse faucibus consequat, ac wisi nec viverra at et rhoncus, duis risus dictumst, mauris lobortis quis sit massa, magna lorem integer mi quisque integer sodales.

http://www.cs.dal.ca/~jamie/course/CS/4173/examples/CSS/bad-layout.html
Version:
19 January 2007
CS 4173 Prof.:
J. Blustein <jamie@cs.dal.ca>

This document is written in valid XHTML 1.0 &
This document makes use of cascading style sheets.

Credits

The greeked text is courtesy of the perbang.dk website. This example was inspired by the excellent work of Stu Nicholls as shown in the layouts section of CSSplay.

Accesskeys

T
jump
to Top
S
digit 3
go to
sitemap
digit 0
go to
accesskey legend