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

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

HTML posted about 1 year 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