2 <title>Floating <div> Demo</title>
3 <link type="text/css" rel="stylesheet" href="demo.css"/>
6 <li>Floating <div> Demo</li>
7 <li><a href="table.html">Table Demo</a></li>
8 <li><a href="list.html">Ordered List Demo</a></li>
9 <li><a href="TextAreaDemo.html">TextAreaDemo.java</a></li>
11 <div style="float:left; width:5em; font-family:big">
12 This is a floating <div> on the left side. It has a width of 5em.
14 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus ligula nec
15 velit condimentum a dapibus tellus accumsan. Donec leo lacus, convallis a
16 consectetur eget, volutpat id metus. Suspendisse sodales scelerisque sapien,
17 tincidunt bibendum neque mollis a. Donec convallis sodales adipiscing. Nullam
18 sodales ipsum vel turpis venenatis non adipiscing odio feugiat. Donec vitae
19 placerat dolor. Nulla facilisi. Ut et dui facilisis tellus scelerisque faucibus.
20 Nam id neque turpis. Sed rhoncus nisl accumsan ligula ultrices sed volutpat
21 tortor imperdiet. Etiam nec mi nec nisl sagittis porta. Curabitur vel nisi
22 vulputate arcu convallis posuere vitae eu metus.</p>
23 <div style="float:right; width:50%; background-image: url(frame); margin-top: 20px; margin-left: 1em; padding: 20px 5px 5px; color:white; text-align: justify">
24 <p>Integer ac dui ut massa malesuada ornare. Quisque lacinia, arcu ut rhoncus
25 ornare, nibh est pulvinar nibh, non vehicula orci tortor a tortor. Mauris ut
26 nisl mauris, vel mattis libero. Sed aliquet tortor nec nulla pretium rhoncus
27 ultrices leo convallis. Class aptent taciti sociosqu ad litora torquent per
28 conubia nostra, per inceptos himenaeos. Sed at interdum ipsum. Nam sit amet odio
29 vitae enim tempor vulputate. In feugiat neque ac orci euismod tincidunt.
30 Maecenas euismod elementum quam, quis tincidunt orci mollis ac. Pellentesque et
31 lobortis tellus. Nunc elementum pellentesque rhoncus. Pellentesque venenatis
32 aliquam magna. Suspendisse eu leo purus, non tempor libero. Proin urna enim,
33 tristique vitae pulvinar eu, hendrerit eu enim. Integer pretium imperdiet auctor.
34 Praesent turpis magna, hendrerit nec pellentesque at, pulvinar ac risus.
35 Curabitur at orci tortor. Nulla in magna in elit mattis semper.</p>
36 <div style="float:left; width:1.2em; padding-right: 5px">
39 <p>Cras arcu arcu, auctor nec porttitor eu, sagittis ut leo. Nam vel ipsum vel
40 metus posuere sagittis. Vestibulum congue fringilla nibh, a ullamcorper magna
41 blandit ut. Integer in nisl id risus viverra vestibulum a ac eros. Nam odio
42 justo, lobortis ultricies condimentum quis, vulputate sit amet metus. Cras vel
43 ipsum quis nisl scelerisque aliquet. Quisque dapibus ultricies mi eu elementum.
44 Sed sit amet ipsum enim, vitae luctus eros. Fusce viverra risus ut mi rutrum
45 posuere. Cras facilisis molestie nisl, id faucibus quam dapibus et. Suspendisse
46 nec ante sem, ac ullamcorper arcu. In hac habitasse platea dictumst. Cum sociis
47 natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
48 Integer commodo hendrerit ante scelerisque adipiscing. Cum sociis natoque
49 penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce
50 lobortis, ligula et ultricies rutrum, purus nulla pellentesque odio, vel dictum
51 ligula erat in enim. Pellentesque tempus feugiat dui ut condimentum. In
52 vestibulum dolor et nulla volutpat imperdiet. Nulla faucibus, urna eu tincidunt
53 ornare, nisl sem interdum elit, in dignissim ante mauris eu turpis. Pellentesque
54 habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
56 <p>In dignissim turpis nec urna aliquam eu pharetra elit viverra. Praesent neque
57 eros, feugiat fringilla blandit non, iaculis in ligula. Fusce porttitor
58 tincidunt metus nec consectetur. Sed placerat, odio sed ullamcorper lacinia,
59 massa risus bibendum turpis, et rutrum neque nulla ut elit. Etiam at magna vel
60 est aliquet ornare. Sed tempus, turpis eget imperdiet sollicitudin, dolor orci
61 suscipit quam, a elementum diam tellus in nisi. Donec eleifend erat et nunc
62 egestas non suscipit libero molestie. Phasellus lacinia bibendum tempus.
63 <button name="niceValueSlider" style="margin: 3px"/> Sed
64 felis odio, posuere eget aliquet quis, suscipit in lectus. Nam ultricies augue
65 vel est venenatis cursus ut et tortor. Nunc risus ante, tristique id fermentum
66 in, varius a nulla.</p>
67 <p>Mauris ullamcorper porttitor enim, eu vehicula urna faucibus et. Nulla tristique
68 tempor fringilla. Donec ut mauris at ligula pellentesque lacinia. Nulla id
69 tortor at lectus lobortis lobortis a sed risus. Cum sociis natoque penatibus et
70 magnis dis parturient montes, nascetur ridiculus mus. Sed convallis augue at sem
71 vestibulum sit amet lobortis magna feugiat. Mauris in magna vitae odio aliquet
72 varius a quis enim. Pellentesque posuere pulvinar neque vitae pretium. Aliquam a
73 condimentum libero. Cras non leo ornare ipsum luctus molestie. Integer non dui
74 felis, sodales cursus orci. Nulla sit amet dui odio. Mauris vestibulum, ligula
75 in convallis sodales, enim est egestas dui, tempor faucibus ligula sapien quis
76 leo. Aenean nec pellentesque lorem.</p>
77 <div style="float:right; width:3.6em; font-family:big">
78 It's me <img src="smiley" alt=":)" style="vertical-align:middle"/>
80 <p>Mauris justo tortor, elementum at semper ut, auctor at diam. Aliquam leo tellus,
81 fermentum sed euismod sed, condimentum id odio. Aenean auctor malesuada diam,
82 non iaculis lacus adipiscing eu. Pellentesque ac faucibus mi. Vivamus cursus
83 semper est, et cursus libero consequat a. Mauris et eros nec nisl commodo
84 pulvinar ut laoreet massa. Sed quis nulla a eros tincidunt sagittis. Ut euismod
85 libero at lectus venenatis commodo. Suspendisse risus dolor, ornare eget mollis
86 et, tempor vitae purus. Phasellus eleifend magna at erat dapibus eget laoreet
87 purus tempus. Maecenas nec nulla mollis quam consectetur interdum ut vitae leo.
88 Phasellus laoreet, nibh quis vehicula commodo, dolor purus pharetra turpis, at
89 condimentum nulla arcu vitae diam. Mauris imperdiet ultricies purus nec rhoncus.</p>
90 <p>In id odio felis. Vivamus auctor ornare nisi sed eleifend. Nunc quam orci,
91 vestibulum vel varius at, mollis euismod lorem. Nulla interdum porttitor ante,
92 eu volutpat tellus laoreet in. Aenean magna erat, commodo in pulvinar vitae,
93 fermentum ac nulla. Suspendisse ac erat neque, eu dapibus purus. Maecenas at
94 nunc vel nisi consequat porta. Suspendisse lobortis, ipsum ac faucibus tincidunt,
95 risus urna pulvinar tortor, eget ullamcorper orci dolor et metus. Duis rutrum
96 diam a nunc porttitor nec luctus risus lacinia. Duis iaculis, arcu vel adipiscing
97 congue, dui metus molestie orci, eget malesuada est nisi eu est.</p>