topical media & game development

talk show tell print

basic-css-11-Examples-float-inline-becomes-block-multiline-inline-box-model.htm / htm



  <!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: rgb(200, 200, 200);
                      height: 100px;
                  }
                  span#floated {
                      background: rgb(220, 220, 220);
                      margin: 10px;
                      padding: 10px;
                      border: 1px solid black;
                      float: left;
                      width: 100px;
                  }
                  span#normal {
                      background: rgb(240, 240, 240);
                      border: 1px solid black;
                      opacity: 0.7;
                  }
              </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.
                      The text of this span is beside the floated span.
                      The text of this span is beside the floated span.
                      The text of this span is beside the floated span.
                      The text of this span is beside the floated span.
                      The text of this span is beside the floated span.
                      The text of this span is beside the floated span.
                  </span>
                  This is extra text. This is extra text. This is extra text.
              </div>
          </body>
      </html>


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.