title: HTML5 markup with CSS background colours
body: <p>I'm trying to code in HTML5, my <code>&lt;header&gt;</code> has 3 sections: e.g. <code>&lt;div id="topHeader"&gt;</code>, <code>&lt;nav&gt;</code> &amp; <code>&lt;div id="mainHeader"&gt;</code></p>
  
  <p>The <code>&lt;topHeader&gt;</code> and <code>&lt;nav&gt;</code> have seperate background colours spanning the width of the viewport (100%).</p>
  
  <p>I would really appreciate some help in the best way to code what I'm trying to do, as I can't figure it out, and also I want to do it the most efficient way.</p>
  
  <p><img src="https://i.stack.imgur.com/WGgeR.jpg" alt=""></p>
  
  <p>It is an existing website, and this is pretty much the way it was done. I would like to wrap the 3 sections into a 'header' tag though. Not sure if I should make the 'header' tag full width?</p>
  
  <pre><code>&lt;div id="topHeader"&gt;
  &lt;div class="contentArea"&gt;
  
      &lt;/div&gt;&lt;!-- e contentArea --&gt;
  &lt;/div&gt;&lt;!-- e topHeader --&gt;
  &lt;div id="mainmenu"&gt;
  &lt;div class="contentArea"&gt;
  
      &lt;/div&gt;&lt;!-- e contentArea --&gt;
  &lt;/div&gt;&lt;!-- e menu --&gt;
  &lt;div id="header"&gt;
      &lt;div class="contentArea"&gt;
  
      &lt;/div&gt;&lt;!-- e contentArea --&gt;
  &lt;/div&gt;&lt;!-- e header --&gt;
  
  
  
  #topHeader {background-color: #9c140a;}
  #topHeader .contentArea {width: 990px;}
  #mainmenu {background:#b1140b;}
  #mainmenu .contentArea {width:990px;}
  #header .contentArea {width: 990px;}
  </code></pre>