Register now and start sharing your code snippets.

How to create a mixed 2 to 3 column layout with footer and header

HTML posted 11 months ago by christian

This is a draft, and an experiment with composing to a vertical flow and the golden ratio

   1  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   2    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   3  <html>
   4  <head>
   5  <title>3 column</title>
   6  <style type="text/css">
   7  
   8  /** Reset styles */
   9  body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td {
  10    margin:0;
  11    padding:0;
  12  } 
  13  
  14  /** 3 column layout */
  15  
  16  #container{
  17    background-color:#9cc;
  18    width: 69em;
  19    margin: 0 auto;
  20  }
  21  
  22  #content{
  23    float: left;
  24    width: 41em;
  25  }
  26  
  27  #sidebar{
  28    float: right;
  29    width: 23em;
  30  }
  31  
  32  #column1{
  33    float: left;
  34    width:23em;
  35  }
  36  
  37  #column2{
  38    float: left;
  39    width:23em;
  40  }
  41  
  42  #column3{
  43    float: left;
  44    width:23em;
  45  }
  46  
  47  
  48  /* Vertical flow */
  49  
  50  body {
  51    font-size: 75%;
  52  }
  53    
  54  html>body {
  55    font-size: 14px;
  56  }
  57    
  58  p {
  59    line-height 1.5em;
  60  }
  61  
  62  
  63  /* Temp styles */
  64  #column1, #column2, #column3, #content, #sidebar {
  65  #  background: blue;
  66    #  border: 1px solid black;
  67  }
  68  
  69  /** */
  70  body{
  71    font-family: Palatino,"Palatino Linotype",Georgia,serif;
  72  }
  73  
  74  </style>
  75  </head>
  76  <body>
  77  
  78    <div id="header">
  79      <div id="container">
  80        <div id="column1">Header 1</div>
  81        <div id="column2">Header 2</div>
  82        <div id="column3">Header 3</div>
  83      </div>
  84    </div>
  85  
  86    <div id="container">
  87      <div id="content">Content</div>
  88      <div id="sidebar">Sidebar</div>
  89    </div>
  90  
  91    <div id="footer">
  92      <div id="container">
  93        <div id="column1">Footer 1</div>
  94        <div id="column2">Footer 2</div>
  95        <div id="column3">Footer 3</div>
  96      </div>
  97    </div>
  98  
  99  </body>
 100  </html>

Tagged golden ratio, vertical flow, design, css, html

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