float left and right with other content : Two columns : Layout Attributes HTML CSS TUTORIALS


HTML CSS TUTORIALS » Layout Attributes » Two columns »

 

float left and right with other content


 

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

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Layout Attributes
» Two columns