Floating around table : float and position « Layout « HTML / CSS

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>

Related examples in the same category

1.	Relative Float
2.	Relative parent and relative child
3.	Relative parent and abolute child
4.	Sized left float
5.	Right-retracted Float
6.	Float left shrunk
7.	Sized float right
8.	Left-retracted Float
9.	Float right shrunk
10.	Right-extended and Top-extended Float
11.	Float-left clear-left shrunk
12.	Float-right clear-right shrunk
13.	Two floats with 50% width and no margins, borders, or padding
14.	Two floats with 50% width and 1px border
15.	Two floats with 45% width and 5% left margin
16.	Two floats with 49.5% width and 5px left margin
17.	Two Floating Sections: 25% of container's width, 55% of container's width minus left margin, left border, left border, and left padding
18.	Float Divider with clear both
19.	Opposing Floats
20.	Two childred Floating left
21.	Floating Positioning
22.	float highlighted dimensions with multiple paragraphs
23.	float with default margin padding
24.	float multiple blocks
25.	float left and right