Floating around table : float and position : Layout Attributes HTML CSS TUTORIALS


HTML CSS TUTORIALS » Layout Attributes » float and position »

 

Floating around table


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
         <title> Doctype Sniffing </title>
         <style type='text/css' media='all'>
            table {
                margin: auto;
            }
            td {
                background: red;
                margin: 10%;
                border: 5px solid black;
                padding: 10%;
                width: 100%;
                color: black;
                font-size: 200%;
                text-align: center;
            }

            div {
                background: green;
                border: 5px solid black;
                font-size: 200%;
                padding: 1%;
            }

            #div1 {
                float: left;
                width: 30%;
            }

            #div2 {
                margin-left: 34%;
                width: auto;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    Some content.
                </td>
            </tr>
        </table>
        <div id='div1'>
            This div smells funny.
        </div>
        <div id='div2'>
            This div has a <em>strange</em> 
            and rather pleasing about it.
        </div>
    </body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Layout Attributes
» float and position