float left and right three columns

float left and right three columns : float : Layout HTML CSS TUTORIALS

HTML CSS TUTORIALS » Layout » float »

float left and right three columns


 

<!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'>
                body {
                    margin: 0;
                    padding: 8px;
                }
                p {
                    border: 1px solid black;
                    padding: 10px;
                    background: rgb(218, 218, 218);
                    margin: 10px;
                }
                p#left {               
                    float: left;
                    width: 200px;
                }
                p#right {
                    float: right;
                    width: 200px;
                }
                p#center {
                    margin: 10px 231px;
                }
            </style>
        </head>
        <body>
            <p id='left'>
                This is the text of the first paragraph. This is the text of the first paragraph. This is the text of the first paragraph.  This is the text of the first paragraph.
            </p>
            <p id='right'>
                This is the text of the second paragraph. This is the text of the second paragraph.  This is the text of the second paragraph.  This is the text of the second paragraph.
            </p>
            <p id='center'>
                This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.  This is the text of the third paragraph.
                This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.
                This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.
                This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. 
                This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.
                This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.
                This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.
                This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.
            </p>
        </body>
    </html>