title: 100% height CSS, Fixed footer
body: <p>My code is viewable at <a href="http://jsfiddle.net/ATbA5/2/" rel="nofollow">http://jsfiddle.net/ATbA5/2/</a>  code will also be at the end of this post</p>
  
  <p>I am trying to make content-wrapper 100% height however for it to be centered. I have looked at other theards on stackoverflow and Can't find a solution. Also A fixed footer at the end of the page not the bottom of the broswer window</p>
  
  <p>HTML</p>
  
  <pre><code> &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="primary-resources/css/main-styles.css"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="content-wrapper"&gt;
  &lt;!-- Header --&gt;
  &lt;div class="header"&gt;
  &lt;div class="threetwentyleft"&gt;
  &lt;a href="index.html"&gt;&lt;img src="primary-resources/imgs/header-logo.png" /&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="sixfortyright"&gt;
  &lt;div class="gameAdBanner"&gt;
  &lt;img src="game-resources/gameone/imgs/banner.png"/&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Content --&gt;
  &lt;div class="gameLeft"&gt;&lt;/div&gt;
  &lt;div class="gameRight"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body ,html {
      background-color:#000000;
      height:100%;
      top:0px;
      bottom:0px;
      clear:both;
      padding:0px;
      margin:0px;
  }
  .content-wrapper {
      margin:auto;
      background-color:#ffffff;
      width:960px;
      padding:0px;
      bottom:0;px;
      top:0px;
      margin:auto;
      box-sizing:border-box;
      height:100%;
      box-sizing:border-box;
      clear:both;
      box-sizing:border-box;
  
  }
  .header {
      width:100%;
  }
  .threetwentyleft {
      width:320px;
      float:left;
      padding:2px;
  }
  .threetwentyleft img{
      width:320px;
      padding:2px;
      border:0px;
  }
  .sixfortyright {
      width:630px;
      float:right;
      height:130px;
  }
  .gameAdBanner {
      width:610px;
      margin-top:2px;
      margin-left:auto;
      margin-right:auto;
  }
  .center {
      margin-left:auto;
      margin-right:auto;
  }
  .gameLeft {
      width:700px;
      padding:5px;
      float:left;
  }
  .gameRight {
      width:260px;
      background-color:#CCC;
      float:right;
      padding:5px;
      height:100%;
      margin-right:3px;
  }
  .footer {
      width:960px;
      background-color:#FC6;
      bottom:0px;
      height:25px;
      position:absolute;
  }
  </code></pre>