Register now and start sharing your code snippets.
-->

Elastic 2 column XHTML and CSS layout

HTML posted about 1 year ago by christian

This is a slight modification of Roger Johansson’s code that I found while reading this article. I’ve modified the code to use ems instead of pixels—Mike Jolley has written about why ems are preferrable over pixels. 

   1  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   2     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   3  <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   4  <head>
   5    <title></title>
   6    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   7    <meta name="description" content=""/>
   8    <style type="text/css">
   9    * {
  10      font-size:95%;
  11      font-family: georgia,'Times',serif;
  12    }
  13  
  14    body {
  15      min-width:62em;
  16    }
  17    
  18    #wrap {
  19      margin:0 auto;
  20      width:60em;
  21      border: 1px solid blue;
  22    }
  23    
  24    #content {
  25      float:left;
  26      width:40em;
  27      border: 1px solid blue;
  28    }
  29  
  30    #sidebar {
  31      float:right;
  32      width:19em;
  33      border: 1px solid blue;
  34    }
  35  
  36    #footer {
  37      clear:both;
  38      border: 1px solid blue;
  39    }
  40    </style>
  41  </head>
  42  <body>
  43    <div id="wrap">
  44      <div id="header">
  45        Header
  46      </div>
  47      <div id="nav">
  48      Navigation
  49      </div>
  50      <div id="content">
  51        Content
  52      </div>
  53      <div id="sidebar">
  54        Sidebar
  55      </div>
  56      <div id="footer">
  57        Footer
  58      </div>
  59    </div>
  60  </body>
  61  </html>

Tagged xhtml, css, layout, 2 column