Image floating to left
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<title>float</title>
<style rel='stylesheet' type='text/css'>
img {
margin: 10px;
border: 1px solid rgb(128, 128, 128);
float: left;
}
img#myImage {
clear: left;
}
</style>
</head>
<body>
<img src='http://www.java2s.com/style/logo.png' alt='' id='john-lennon' />
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
eros leo, molestie eu, laoreet eu, rhoncus suscipit, tortor.
Fusce interdum, metus eu sagittis mollis, lorem augue fringilla
leo, at pretium magna tortor sed ligula. Nulla id nisl. Cras
interdum velit sit amet lacus. In egestas. Integer aliquet.
Phasellus sagittis congue dui. Aenean purus neque, viverra at,
imperdiet sit amet, dignissim vel, sapien. Suspendisse tristique.
Fusce nunc. Pellentesque ultrices magna in leo. Vestibulum
aliquam quam fermentum sapien. Aenean velit erat, vestibulum sit
amet, rhoncus a, viverra vitae, lacus. Etiam porttitor, mauris ut
vulputate egestas, tortor dolor tincidunt leo, non scelerisque
magna dui vitae urna. Vivamus ut massa. Vestibulum sit amet
sapien et magna varius auctor. Sed a magna. Pellentesque nonummy
odio nec metus. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas.
</p>
<img src='http://www.java2s.com/style/logo.png' alt='' id='myImage' />
<p>
Sed non dolor ut tortor imperdiet hendrerit. Etiam malesuada.
Proin rutrum ligula eu nibh. Maecenas sit amet est. In eros.
Proin elit lacus, volutpat at, sagittis et, convallis sit amet,
sapien. Fusce bibendum augue vitae sapien. Morbi feugiat
venenatis libero. Vestibulum porttitor. Cras neque ante, luctus
luctus, elementum volutpat, euismod eget, nunc. Praesent ornare.
Mauris cursus dolor.
</p>
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Curabitur vitae neque sed nisi luctus
accumsan. Nulla tincidunt, risus sed sodales molestie, sem eros
luctus tellus, ut tempus elit dolor quis mauris. Donec pharetra
sollicitudin turpis. Vivamus fermentum interdum enim. Proin
sollicitudin eros at neque. Nullam vel turpis ac risus interdum
ultrices. Cras sit amet diam in arcu ultrices rhoncus. Integer id
sapien. Fusce adipiscing. Donec lectus tortor, molestie a, porta
at, tristique sed, enim. Aliquam a lorem a nisl fringilla porta.
Ut aliquet arcu nec arcu. Sed in elit et pede viverra tempus.
Duis nisi est, posuere sit amet, venenatis eu, faucibus nec, velit.
Vestibulum malesuada tristique urna. Fusce ut est. Sed adipiscing
nunc sed mi. Vivamus velit nibh, viverra et, cursus et, commodo nec,
metus. Sed bibendum est in odio.
</p>
</body>
</html>
Related examples in the same category