Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur bibendum nulla sed lorem. Vivamus interdum elementum eros. Aliquam quam sapien, egestas in, molestie quis, ullamcorper in, nibh. In hac habitasse platea dictumst. Vestibulum scelerisque adipiscing nulla. Duis sit amet nisi. Nulla id nibh. Curabitur egestas, purus a dignissim tristique, purus massa eleifend metus, non consectetuer eros erat at nunc. Nam sagittis nisi quis purus. Quisque porttitor. Morbi nunc turpis, venenatis ac, consequat et, vulputate posuere, lorem. Sed nisl. Aliquam erat volutpat. Vivamus nec dui in enim tempus elementum. Donec massa pede, porta eu, bibendum id, pretium at, velit. Quisque eget purus vel eros lacinia rhoncus. Proin placerat leo nec lectus. Nam eget nibh ut sem elementum sodales. Donec dui pede, auctor at, congue in, interdum ut, diam. Cras at nulla. Nunc enim tellus, blandit nec, sollicitudin non, luctus sed, arcu. Nulla ac elit. Aenean volutpat. Duis aliquam ullamcorper mi. In hac habitasse platea dictumst. Etiam elit diam, tempus eu, porttitor non, gravida sed, metus. Aenean nec nulla. Aliquam consequat, massa in rhoncus facilisis, tortor augue molestie sapien, vitae scelerisque enim lacus a quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse felis. Morbi aliquet. Cras tristique sodales ipsum. Quisque eu nunc vel augue pharetra sodales. Quisque pellentesque cursus dolor. Pellentesque quis ante consectetuer ante elementum ultricies. Curabitur enim sem, ullamcorper vitae, viverra nec, consequat quis, pede. Nunc vestibulum, libero ut pharetra pulvinar, odio dolor aliquam lorem, at egestas tortor magna luctus arcu. Morbi libero sem, hendrerit ut, tincidunt non, malesuada ac, neque. In hac habitasse platea dictumst. Vivamus est ipsum, sollicitudin et, sagittis nec, tempus vitae, purus. Ut mattis odio et nulla. Nam turpis augue, tempor sed, imperdiet sit amet, porta at, lacus. Quisque eget enim sed libero tristique lobortis.
Source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Runaround Test</title>
<style type="text/css">
body {
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
color: #000000;
margin: 50px;
}
#title {
text-align: center;
color: #C0C0C0;
font-weight: bold;
font-size: 2em;
letter-spacing: 0.75em;
}
#subtitle {
text-align: center;
font-weight: bold;
font-size: 1.25em;
letter-spacing: 0.75em;
}
/* ++++++++++ CSS for Experiment START ++++++++++ */
#container {
width: 70%;
margin: auto;
background: url('pintail.jpg') no-repeat top left;
}
#run1 {width: 170px; height: 15px;}
#run2 {width: 190px; height: 15px;}
#run3 {width: 200px; height: 15px;}
#run4 {width: 205px; height: 15px;}
#run5 {width: 210px; height: 15px;}
#run6 {width: 220px; height: 15px;}
#run7 {width: 235px; height: 15px;}
#run8 {width: 265px; height: 15px;}
#run9 {width: 290px; height: 15px;}
#run10 {width: 310px; height: 15px;}
#run11 {width: 310px; height: 15px;}
#run12 {width: 125px; height: 15px;}
#run13 {width: 125px; height: 15px;}
#run14 {width: 125px; height: 35px;}
.runaround {
float: left;
clear: left;
}
p {
line-height: 1em;
}
/* ++++++++++ CSS for Experiment END ++++++++++ */
</style>
</head>
<body>
<div id="title">Experiment in CSS</div>
<div id="subtitle">(The Runaround)</div>
<hr />
<div id="container">
<div id="run1" class="runaround"></div>
<div id="run2" class="runaround"></div>
<div id="run3" class="runaround"></div>
<div id="run4" class="runaround"></div>
<div id="run5" class="runaround"></div>
<div id="run6" class="runaround"></div>
<div id="run7" class="runaround"></div>
<div id="run8" class="runaround"></div>
<div id="run9" class="runaround"></div>
<div id="run10" class="runaround"></div>
<div id="run11" class="runaround"></div>
<div id="run12" class="runaround"></div>
<div id="run13" class="runaround"></div>
<div id="run14" class="runaround"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur bibendum nulla sed lorem. Vivamus interdum elementum eros. Aliquam quam sapien, egestas in, molestie quis, ullamcorper in, nibh. In hac habitasse platea dictumst. Vestibulum scelerisque adipiscing nulla. Duis sit amet nisi. Nulla id nibh. Curabitur egestas, purus a dignissim tristique, purus massa eleifend metus, non consectetuer eros erat at nunc. Nam sagittis nisi quis purus. Quisque porttitor. Morbi nunc turpis, venenatis ac, consequat et, vulputate posuere, lorem. Sed nisl. Aliquam erat volutpat. Vivamus nec dui in enim tempus elementum. Donec massa pede, porta eu, bibendum id, pretium at, velit. Quisque eget purus vel eros lacinia rhoncus. Proin placerat leo nec lectus. Nam eget nibh ut sem elementum sodales. Donec dui pede, auctor at, congue in, interdum ut, diam. Cras at nulla. Nunc enim tellus, blandit nec, sollicitudin non, luctus sed, arcu. Nulla ac elit. Aenean volutpat. Duis aliquam ullamcorper mi. In hac habitasse platea dictumst. Etiam elit diam, tempus eu, porttitor non, gravida sed, metus. Aenean nec nulla. Aliquam consequat, massa in rhoncus facilisis, tortor augue molestie sapien, vitae scelerisque enim lacus a quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse felis. Morbi aliquet. Cras tristique sodales ipsum. Quisque eu nunc vel augue pharetra sodales. Quisque pellentesque cursus dolor. Pellentesque quis ante consectetuer ante elementum ultricies. Curabitur enim sem, ullamcorper vitae, viverra nec, consequat quis, pede. Nunc vestibulum, libero ut pharetra pulvinar, odio dolor aliquam lorem, at egestas tortor magna luctus arcu. Morbi libero sem, hendrerit ut, tincidunt non, malesuada ac, neque. In hac habitasse platea dictumst. Vivamus est ipsum, sollicitudin et, sagittis nec, tempus vitae, purus. Ut mattis odio et nulla. Nam turpis augue, tempor sed, imperdiet sit amet, porta at, lacus. Quisque eget enim sed libero tristique lobortis.</p>
</div>
</body>
</html>