title: W3.CSS how to get a standard header-[left-right]footer layout?
body: <p>I am trying to learn how to use w3.css to structure a page.</p>
  
  <p>First attempt is to get the standard header/left panel/right-panel/footer layout.</p>
  
  <p>I will have then to complicate the issue inserting nested layouts, but that is for later as I'm unable to make this simple example render as I want :(</p>
  
  <p>my current code is quite simple (I have done many attempts bearing basically no difference):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Page&lt;/title&gt;
    &lt;link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;header class="w3-container w3-indigo"&gt;
      &lt;div class="w3-xxlarge"&gt;Lorem ipsum -- dolor
        &lt;a href="login.html" class="w3-btn w3-teal w3-large w3-round-xxlarge w3-right"&gt;log in&lt;/a&gt;
      &lt;/div&gt;
    &lt;/header&gt;
    &lt;div class="w3-display-container"&gt;
      &lt;div class="w3-container w3-left w3-border" style="width: 40%"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Res enim se praeclare habebat, et quidem in utraque parte. Sed in rebus apertissimis nimium longi sumus. Duo Reges: constructio interrete. Aliter enim nosmet ipsos nosse non possumus. Aliud igitur esse censet gaudere, aliud non dolere. Multoque hoc melius nos veriusque quam Stoici. Nam, ut sint illa vendibiliora, haec uberiora certe sunt. &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="w3-container w3-right w3-border" style="width: 60%"&gt;
        &lt;p&gt;Potius ergo illa dicantur: turpe esse, viri non esse debilitari dolore, frangi, succumbere. Dat enim intervalla et relaxat. Non autem hoc: igitur ne illud quidem. Sed quot homines, tot sententiae; Quae in controversiam veniunt, de iis, si placet, disseramus.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;footer class="w3-container w3-blue"&gt;
      &lt;p&gt;Iam id ipsum absurdum, maximum malum neglegi. Quae cum essent dicta, discessimus. Hanc ergo intuens debet institutum illud quasi signum absolvere. Deprehensus omnem poenam contemnet. Odium autem et invidiam facile vitabis. Uterque enim summo bono fruitur, id est voluptate. &lt;/p&gt;
    &lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This code has several issues I'm unable to pinpoint:</p>
  
  <ol>
  <li>In header : The button is not aligned with text.</li>
  <li>Footer: why it's not a footer and fills the space left by the sorter (right) panel? I also tried leaving a gap between the panes (35%-55%) in that case footer is rendered <em>between</em> the panes and then below right, as if also footer would be "float".</li>
  <li>Why the color (w3-blue) is applied to all panes? Shouldn't it apply only to footer?</li>
  </ol>
  
  <p>What am I doing wrong?</p>
  
  <p>Any pointer to relevant documentation/tutorial (understandable by a newbie like me) would be welcome.</p>