title: Css for header,section and footer arrangement
body: <p>I have basic html code :</p>
  
  <pre><code>&lt;header&gt;&lt;/header&gt;
  &lt;main&gt;
  &lt;nav&gt;&lt;/nav&gt;
  &lt;section&gt;&lt;/section&gt;
  &lt;/main&gt;
  &lt;footer&gt;&lt;/footer&gt;
  </code></pre>
  
  <p>and I need css to have the header at the top, the footer at the bottom, the nav and the section between the header and footer, with the nav on the left and the section on the right.</p>
  
  <p>As an example : <a href="https://fr.wikipedia.org/" rel="nofollow noreferrer">https://fr.wikipedia.org/</a></p>
  
  <p>But in the case where the main content is smaller than the screen size, I need to have the footer fixed on the bottom of the screen.</p>
  
  <p>My CSS is something like that :</p>
  
  <pre><code>    header, nav, section, footer {
          padding: 1px 0;
      }
  
      header {
          background-color: lightcoral;
          text-align: center;
          background: #FF9900 url("/Content/Images/Etoile.png") 5px center no-repeat;
          background-size: 100px;
      }
  
      main {
          margin: auto;
      }
  
      nav {
          float: left;
          width: 15%;
          background-color: lightsalmon;
      }
  
      section {
          float : right;
          width : 85%;
          background-color: lightblue;
      }
  
      footer {
          background-color: lightgreen;
          text-align: center;
          clear: both;
      }
  </code></pre>
  
  <p>Could you help me please ?</p>