div float: left; 2 : div layout « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. div layout

div float: left; 2

      
<!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;
}
div#fifty-states {
    text-align: center;
    border: 1px solid rgb(200, 200, 200);
    background: lightyellow;
    margin: 5px;
    float: left;
}
</style>


    </head>
    <body>
        <div id='fifty-states'>
            <img src='fifty_states.jpg' alt='fifty states' />
            <p>
                Sed non dolor ut tortor imperdiet hendrerit. Etiam
                malesuada.  Proin rutrum ligula eu nibh.
            </p>
        </div>
        <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.div float: left;
2.Two floating right div section
3.Two floating left div sections
4.Div float: none;
5.Div float: left; 3
6.Div float: left; 4
7.Div float: left; 5
8.DIV float: left; 6
9.DIV float: right;
10.div float with width and height
11.div width: 50px;
12.DIV width: auto;
13.Div width: 100%;
14.Div width: 1001px;
15.Div width: 500px;
16.DIV width: 134px;
17.Using width to control nested div boxes
18.Set width and height to DIV
19.Shrinkwrapped DIV by setting both width and height to auto
20.div height: 50px;
21.Div line-height: 23px;
22.Div line-height: 17px;
23.DIV line-height: 1.3em;
24.DIV height:1.8em;
25.DIV line-height:1.8em;
26.Using div with different height to create layout
27.Div for clearing
28.Div clear: both;
29.DIV for clear
30.DIV clear: left;
31.Div position: relative;
32.DIV position: absolute;
33.Using position: fixed; to place div tags to four corners
34.Using position: absolute; to place div tags to four corner
35.div with position: absolute; inside div with position: relative;
36.div with position: absolute; inside body
37.div position:relative;
38.Set position of DIV to absolute, to bottom 50px, to left 100px
39.Wrap tags in DIV and set the position
40.Div left: 0;
41.Div display: inline;
42.div display: table-cell;
43.Div top: 0;