span float: right; : span « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. span

span float: right;

     
<!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 {
    margin: 10px;
    border: 1px solid rgb(128, 128, 128);
}
p {
    font: 12px sans-serif;
}
span#sailboat {
    text-align: center;
    border: 1px solid rgb(200, 200, 200);
    background: rgb(244, 244, 244);
    margin: 5px;
    float: right;
}
</style>


    </head>
    <body>
        <p>
           <span id='sailboat'>
                <img src='http://java2s.com/style/logo.png' alt='desert sailboat' />
                <br />
                Fusce bibendum augue vitae sapien. Morbi feugiat
                venenatis libero.
            </span>
            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.'span' Example
2.span line-height: 0.6em;
3.span display: none;
4.span inside a h2
5.Empty span with background image
6.Using span to highlight one letter
7.Using span to create author part of a quotation
8.Using span to highlight
9.Span inside a DIV
10.Span padding: 0 57px;
11.Span color: #786B50;
12.Span display: block;
13.Span float: left;
14.Span letter-spacing: 6px;
15.Span width: 1000px;
16.Span position: absolute;
17.Span top: 206px;
18.Span left: 86px;
19.Span color: #140A00
20.Let DIV span two columns
21.span with class selector
22.span padding: 0 10px;
23.span background: mistyrose;
24.span float left
25.span border: 1px solid rgb(200, 200, 200);
26.span background: rgb(244, 244, 244);
27.span background: white;
28.span border: 1px solid black;
29.Using span to create quotation
30.span.color {color:#FF0000;}
31.Capital first letter with span
32.Style a letter with span
33.Inline style for Span
34.The span element can be used to group inline elements only.
35.span with id style
36.Inline Spacer
37.Inline Decoration solid
38.Inline Decoration by border
39.Inline Decoration with image
40.span in a h2 with absolute position
41.SPAN in anchor
42.Span in a H2
43.Shrinkwrapped SPAN by setting both width and height to auto
44.Horizontally Stretched Absolute SPAN
45.Line break with margin top
46.Default line space with margin 0
47.One and half Line break with margin-top: 1.5em
48.Invisible inline horizontal rule: a line-break.
49.Double-border inline horizontal rule.
50.Background inline horizontal rule with image
51.Combination Inline horizontal rule.
52.Use SPAN to style Blocked area
53.Absolute centered