Image with clear left : img « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. img

Image with clear 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

1.Adding images and alt message with XHTML
2.Alternative Text Rendering
3.Set background to #fff for an image
4.Set padding to 4px
5.display block
6. in a
7.Set image margin top and left to negative value
8.Image block
9.image clear: left;
10.Switch image for link
11.Adding caption to Image
12.Image as a link
13.Creating an Image Map
14.Top link with image
15.Wrap text along with image
16.Using arrow image for LI
17.Use image to create line
18.Using color image to create round corner
19.Large corner image for the top bar
20.Image slide show
21.Text wrap around image
22.Image side bar
23.Text wrap image
24.Using huge image to highlight your content
25.Using image to add shading to your text
26.Image Text wraper
27.Marginal Graphic Dropcap
28.Raised image
29.Lowered text
30.Using css to wrap text around images
31.Image map area
32.HTML Image map
33.Creating and Using Image Maps
34.shape = "rect" indicates a rectangular area, with coordinates for the upper-left and lower-right corners
35.value "poly" creates a hotspot in the shape of a polygon, defined by coords
36.shape = "circle" indicates a circular area with the given center and radius
37. indicates that the specified image map is used with this image
38.Client-side Image Map Example
39.'area' defines the clickable area on a graphic or image
40.'coords' sets the coordinates of an 'a' or 'area' element
41.'galleryimg' eliminate the appearance of the toolbar for all 'img' elements
42.'img' displays a picture or a video clip
43.Adding shading to the picture
44.HTML code for image scaling
45.'ismap': Whether the image in 'img' element is a server-side image map
46.'lowsrc' gives the URL of a low-resolution image
47.'map' specifies the coordinates of an image map
48.'nohref' indicates that the 'area' in the 'map' has no link
49.'shape' sets the shape of an 'a' or 'area' element
50.'src' specifies a URL to be loaded by the element
51.'start' specifies when a video clip should start playing
52.'usemap' sets the image map for the map element
53.'hspace' sets the space in pixels between the left and right sides of an element
54.'vspace' sets the size in pixels of the vertical margins