title: Blogger Custom Template HTML Breaks Layout Page
body: <p>I am trying to make a Blogger template from scratch and have been looking at the code from the generated ones. I don't care about having it fully editable and having the layout able to be changed from the admin panel but I don't want it to be completely broken.<img src="https://i.stack.imgur.com/a79u6.png" alt="enter image description here"></p>
  
  <p>The header is all messed up as you can see and is under the Favicon box. In actual practice, the template is working just fine but in this window it clearly isn't. The following is an outline of what I have come up with.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;?xml version="1.0" encoding="UTF-8" ?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;b:skin&gt;
          &lt;![CDATA[
              body {
                  background: white;
                  color: black;
              }
          ]]&gt;
          &lt;/b:skin&gt;
          &lt;b:include data="blog" name="all-head-content" /&gt;
          &lt;title&gt;&lt;data:blog.pageTitle /&gt;&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;b:section id="navbar" maxwidgets="1" showaddelement="no"&gt;
              &lt;b:widget id="Navbar1" locked="true" title="Navbar" type="Navbar"&gt;&lt;/b:widget&gt;
          &lt;/b:section&gt;
          &lt;div id="wrapper"&gt;
              &lt;b:section id="header" maxwidgets="1" showaddelement="no"&gt;
                  &lt;b:widget id="Header1" locked="true" title="Header" type="Header"&gt;&lt;/b:widget&gt;
              &lt;/b:section&gt;
              &lt;b:section id="menu"&gt;
                  &lt;b:widget id="PageList1" locked="true" title="Pages" type="PageList"&gt;&lt;/b:widget&gt;
              &lt;/b:section&gt;
              &lt;b:section id="main"&gt;
                  &lt;b:widget id="Blog1" locked="true" title="Blog Posts" type="Blog"&gt;&lt;/b:widget&gt;
              &lt;/b:section&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I am fairly sure you could copy and paste the above as the template HTML and get the same problem!</p>
  
  <ul>
  <li>Is it because my layout isn't the same? I see a bunch of (if not all) the templates that I was using as an example use class names and id like <code>fauxcolumn-outer</code> and <code>body-fauxcolumn-outer</code>.</li>
  <li>Follow up question: when I enable or disable or drag around different parts of a page like where the location is displayed in the post header... how does that work? My template clearly doesn't support that because I never told it to so are there guidelines to that or something?</li>
  </ul>