title: website layout issue & best practice when designing the main template
body: <p>I want to have a website layout with </p>
  
  <ul>
  <li>Header section full width</li>
  <li>Content Area Center with 870px width with Content bar &amp; widget bar</li>
  <li>Footer section with 100%</li>
  <li>Copyright bar at bottom with 100%</li>
  </ul>
  
  <p>Sample design is setup at fiddle <a href="http://jsfiddle.net/7zavu4f4/" rel="nofollow">http://jsfiddle.net/7zavu4f4/</a></p>
  
  <p>For some reason Footer section is not showing up and i want to know if this design temple is flexible to adjust contents in content area of varying height.</p>
  
  <p>Has this been design in a good way or i need to make any changes to make it clean.</p>
  
  <pre><code>&lt;div class="header-wrapper"&gt;
      &lt;div class="search-bar"&gt;Search control will be on right&lt;/div&gt;
      &lt;div class="logo-Wrapper"&gt;Logo Will Be here&lt;/div&gt;
      &lt;div id='cssmenu'&gt;
          &lt;ul&gt;
              &lt;li class='active'&gt;&lt;a href='#'&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;
  
              &lt;/li&gt;
              &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Products&lt;/span&gt;&lt;/a&gt;
  
              &lt;/li&gt;
              &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Company&lt;/span&gt;&lt;/a&gt;
  
              &lt;/li&gt;
              &lt;li class='last'&gt;&lt;a href='#'&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;
  
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="content-wrapper"&gt;
      &lt;div class="content-bar"&gt;&lt;/div&gt;
      &lt;div class="widget-bar"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="footer-wrapper"&gt;&lt;/div&gt;
  &lt;div class="copyright-wrapper"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I don't need a responsive version for this as we have a separate mobile version of this website based on Mobile jQuery.. So please only take desktop version into consideration</p>