title: Aligning HTML elements during print mode
body: <p>I have an html <code>&lt;footer&gt;</code> element that I'm trying to make act like a footer in a word document. In other words, the footer needs to be positioned at the bottom of the page. Is there a way to use the CSS <code>@media print</code> to move the footer to the bottom of that particular page? Also, the space  the footer has to move can vary from page to page. Is there a way to restrict that element from moving farther than a certain distance? </p>
  
  <p><strong>MY CODE</strong></p>
  
  <pre><code>footer p {
      color: green;
      text-align: center;
      font-size: 11px;
      display: none;
  }
  
  footer div {
      color: green;
      border: 1px solid green;
      display: none;
  }
  
  @media print {
      footer p {
          display: block !important;
          position: fixed;
          bottom: 0;
      }
      footer div {
          display: block !important;
          position: fixed;
          bottom: 0;
      }
  }
  </code></pre>
  
  <p>The <code>div</code> is not visible on any of the pages and the <code>p</code> is only visible on the first page.</p>