topical media & game development

talk show tell print

basic-css-11-Exercises-exercise11-1.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'>
                  body {
                      margin: 0;
                      padding: 5px;   
                  }
                  div {
                      font: 18px sans-serif;
                      color: white;
                      border: 1px solid black;
                      background: gray;
                      height: 200px;
                      padding: 5px;
                  }
                  div#column1 {
                      float: left;   
                      width: 150px;
                      margin: 0 5px 0 0;
                  }
                  div#column2, div#column3 {
                      float: right;   
                      width: 150px;
                      margin: 0 0 0 5px;
                  }
                  div#column4 {
                      margin: 0 334px 0 167px;      
                  }
                  div#footer {
                      height: 35px;
                      margin: 5px 0 0 0;
                      clear: both;
                  }
              </style>
          </head>
          <body>
              <div id='column1'>
                  Content of column 1.
              </div>
              <div id='column2'>
                  Content of column 2.
              </div>
              <div id='column3'>
                  Content of column 3.
              </div>
              <div id='column4'>
                  Content of column 4.
              </div>
              <div id='footer'>
                  Content of footer.
              </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.