Two image float left and right separately : Image flow : Images HTML CSS TUTORIALS


HTML CSS TUTORIALS » Images » Image flow »

 

Two image float left and right separately


 

<!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(128128128);
}
img#starfish {
    float: left;
}
img#lake {
    float: right;
}
        </style>
    </head>
    <body>
        <img src='http://www.navioo.com/style/logo.png' alt='' id='starfish' />
        <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.
            <img src='http://www.navioo.com/style/logo.png' alt='' id='lake' />
            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>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Images
» Image flow