title: How can I position my footer correctly using CSS?
body: <p>Could someone please help me position my footer correctly in my webpage?</p>
  
  <p>I have the following layout:</p>
  
  <p><img src="https://i.stack.imgur.com/KCv9P.png" alt="enter image description here"></p>
  
  <p>This is how I want the footer to behave:</p>
  
  <ul>
  <li>The footer should be positioned at the bottom of the page when the content is empty.</li>
  <li>The footer should be 'pushed' down when the content exceeds the height of the page.</li>
  </ul>
  
  <p>here is my HTML:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;@ViewBag.Title&lt;/title&gt;
      &lt;/head&gt;
  
  &lt;body&gt;
  
  /* This is outside of the container as I want the background 
     to stretch across the top of the webpage */
  &lt;div id="menu"&gt;
      &lt;div&gt;
         /* This contains an unordered list which is restyled as a series of links.
            The reason it is contained in inside the menu div is because I want this
            content to be centred. /*
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="page-container"&gt;
  
          &lt;div id="header"&gt;
              &lt;h1&gt;Website title&lt;/h1&gt;
          &lt;/div&gt;
  
          /* This is floated to the left of the content area. */
          &lt;div id="content"&gt;
              @RenderBody()
          &lt;/div&gt;
  
           /* This is floated to the right of the content area. */
          &lt;div id="sidebar"&gt;
              @RenderSection("sidebar", false)
          &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="footer"&gt;
      My footer content goes here.
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>Please note the following:</p>
  
  <ul>
  <li>The content and header is contained in a 'Div' called 'page-container'. </li>
  <li>The content is made up of two Divs which are floated to the left and right of the content area.</li>
  <li>The menu is outside of the page-container div. This is because I want the menu background to stretch across the top of the page (like the Stackoverflow menu)</li>
  </ul>
  
  <p>I am aware that there are many similar questions on Stackoverflow and that a Google search will return a large amount of results.</p>
  
  <p>The thing I have noticed whilst trying to adapt the samples I have found is that they usually depend on a very specific html structure (E.G. everything but the footer is in a container) that does not match mine. No matter what I try I end up with something that doesn't work (E.G. the footer is positioned below the screen bounds when the content is empty or is not moved down when the content exceeds the page).</p>
  
  <p><strong>Update</strong></p>
  
  <p>I can get my footer to stick to the bottom of the page but it is not pushed down when my content expands. I think this is because my content is made up of two floating elements.</p>
  
  <p>Most people seem to be pointing me to tutorials they have found on Google (as already stated I have read most of these and already attempted to adapt them).</p>
  
  <p>I have come to the conclusion that I am going to have to restructure my HTML to get this to work; the point of my question was how do I do this with the HTML I already have? So much for separation of concerns!</p>