multiple floats : float « CSS « HTML / CSS

multiple floats

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html>
        <head>
            <title></title>
            <style type='text/css'>
                p {                 
                    float: left;
                    border: 1px solid black;
                    padding: 10px;
                    background: rgb(218, 218, 218);
                    margin: 10px;
                }
            </style>
        </head>
        <body>
      <p>
          This is the text of the first paragraph.
      </p>
      <p>
          This is the text of the second paragraph.
      </p>
      <p>
          This is the text of the third paragraph.
      </p>
        </body>
    </html>

Related examples in the same category

1.	'float' Example
2.	float left
3.	float right
4.	float: left;
5.	float: left
6.	float box model
7.	float control default margin padding
8.	float extra box properties
9.	float highlighted dimensions
10.	float highlighted
11.	float inline
12.	float inline becomes block inline
13.	float inline becomes block multiline inline box model
14.	float left and right
15.	float left and right for three columns layout
16.	float left and right with other content
17.	float: left; margin-left: -700px
18.	float: left; width: 100%
19.	p float: left;
20.	When a block level element is floated, its sizing changes from expand-to-fit, to shrink-to-fit, and is no longer subject to margin collapsing.
21.	When an inline element is floated, it becomes a block-level element with shrink-to-fit sizing.
22.	Using floating elements to create columns
23.	columns floating left
24.	float: left; for right column
25.	The float property is used to force content to wrap around another element.