Image float left, (text wrap) : img float « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. img float

Image float left, (text wrap)

      
<!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 type='text/css'>
img {
    width: 200px;
    height: auto;
    float: left;
    margin: 10px;
    border: 1px solid rgb(128, 128, 128);
}
p {
    font: 12px sans-serif;
}
</style>


    </head>
    <body>
        <img src='http://java2s.com/style/logo.png' alt='Antique' />
        <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>
        <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>
    </body>
</html>








Related examples in the same category

1.Image float: left
2.Image floating left and right
3.Image floating right
4.Image floating with text
5.Image floating left
6.Image floating right 2
7.Image floating right, left
8.Floating the image allows the text to flow around it
9.Text floating around image
10.Two image float left and right separately
11.Image floating to left
12.Image Floating right 3
13. floating to right with image
14.Image float and text wraping