float inline elements becomes block : Inline Elements : Box Model HTML CSS TUTORIALS


HTML CSS TUTORIALS » Box Model » Inline Elements »

 

float inline elements becomes block


 

<!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'>
                div {
                    margin: 10px;
                    background: red;
                    height: 100px;
                }
                span#floated {
                    background: pink;
                    margin: 10px;
                    padding: 10px;
                    border: 1px solid black;
                    float: left;
                    width: 100px;
                }
                span#normal {
                    background: gold;
                    border: 1px solid black;
                    margin: 100px;
                    width: 1000px;
                }
            </style>
        </head>
        <body>
            <div>
                <span id='floated'>
                    This span is floated left.
                </span>
                <span id='normal'>
                    The text of this span is beside the floated span.
                </span>
                This is extra text. This is extra text. This is extra text. 
                This is extra text. This is extra text. This is extra text.
                This is extra text. This is extra text. This is extra text.
                This is extra text. This is extra text. This is extra text.
                This is extra text. This is extra text. This is extra text.
                This is extra text. This is extra text. This is extra text.
            </div>
        </body>
    </html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Box Model
» Inline Elements