Professional/ Better way of header/body/footer layout : <p>So this is the fist way i have see this with a wrapper.</p>

<pre><code> &lt;body&gt;
   &lt;div id="wrapper"&gt;
     &lt;div id="header"&gt;  
       &lt;h1&gt;My page&lt;/h1&gt;
       &lt;!-- Header content --&gt;
   &lt;/div&gt;

   &lt;div id="main"&gt;
   &lt;!-- Page content --&gt;
   &lt;/div&gt; 

  &lt;div id="footer"&gt;
  &lt;!-- Footer content --&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/body
</code></pre>

<p>This is the second way with out a wrapper , i just wanted to know the better most used way even if it's different than these two that will not cause problems afterwards in my page.</p>

<pre><code> &lt;body&gt;
     &lt;div id="header"&gt;  
       &lt;h1&gt;My page&lt;/h1&gt;
       &lt;!-- Header content --&gt;
   &lt;/div&gt;

   &lt;div id="main"&gt;
   &lt;!-- Page content --&gt;
   &lt;/div&gt; 

  &lt;div id="footer"&gt;
  &lt;!-- Footer content --&gt;
 &lt;/div&gt;   
&lt;/body
</code></pre>
