title: my html page footer doesn't show
body: <p>i have a login page that must have a footer but i don't know why my footer doesn't show, here is my html and css file, please someone tell what is wrong?</p>
  
  <p><strong>HTML :</strong></p>
  
  <pre><code>    &lt;body&gt;
  
      &lt;!-- Begin Page Content --&gt;
  
      &lt;div id="container"&gt;
  
          &lt;form  method="POST" id="login"&gt;
  
          &lt;label for="name"&gt;تلفن همراه :&lt;/label&gt;
  
          &lt;input type="tel" required="" title="لطفا شماره همراه خود را به صورت صحیح وارد نمایید" x-moz-errormessage="لط
          فا شماره همراه خود را به صورت صحیح وارد نمایید" name="phone" id="phone"&gt;
  
          &lt;label for="username"&gt;رمز عبور :&lt;/label&gt;
  
          &lt;input  type="password" required="" id="password" title="رمز عبور را وارد کنید" x-moz-errormessage="رمز عبور را وارد کنید" name="password"&gt;
  
          &lt;div id="lower"&gt;
  
          &lt;input type="checkbox"&gt;&lt;label class="check" for="checkbox"&gt;مرا بخاطر بسپار&lt;/label&gt;
  
  
          &lt;input type="submit" value="ورود"  &gt;&lt;br /&gt;
          &lt;a style=" float: right; clear:both; margin-right: 10px;margin-bottom:10px;  text-decoration: blink;" href="register.php"&gt;ثبتنام نکرده ام&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;/form&gt;
  
      &lt;/div&gt;
      &lt;div class="footer"&gt;
              &lt;div&gt;
                      &lt;a href="http://hameja123.ir"&gt;همه جا 123&lt;/a&gt;
              &lt;/div&gt;
                      کلیه حقوق این سایت محفوظ بوده و متعلق به
                      &lt;a href="http://hameja123.ir"&gt;همه جا 123&lt;/a&gt;
                      می‌باشد.
              &lt;div style="direction:ltr; color: #ffffff;"&gt;hameja123.ir - Copyright       ©  2013 - All rights reserved by Reza Tanzifi.&lt;/div&gt;
  
          &lt;/div&gt;&lt;!--end footer--&gt;
  
      &lt;!-- End Page Content --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS :</strong> </p>
  
  <pre><code>@import url(animate.css);
  
      /* Selections */
  
      ::selection {
          color: #fff;
          text-shadow: none;
          background: #444;
      }
  
      ::-moz-selection {
          color: #fff;
          text-shadow: none;
          background: #444;
      }
  
      /* Basics */
  
      html, body {
          width: 100%;
          height: 100%;
          font-family: "Helvetica Neue", Helvetica, sans-serif;
          color: #444;
          -webkit-font-smoothing: antialiased;
          background-image: url(./images/bg.png);
          background-repeat: repeat;
  
      }
  
      #container {
          position: fixed;
          width: 340px;
          height: 280px;
          top: 50%;
          left: 50%;
          margin-top: -140px;
          margin-left: -170px;
          background: #fff;
          border-radius: 3px;
          border: 1px solid #ccc;
          box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
          -webkit-animation-name: bounceIn;
          -webkit-animation-fill-mode: both;
          -webkit-animation-duration: 1s;
          -webkit-animation-iteration-count: 1;
          -webkit-animation-timing-function: linear;
          -moz-animation-name: bounceIn;
          -moz-animation-fill-mode: both;
          -moz-animation-duration: 1s;
          -moz-animation-iteration-count: 1;
          -moz-animation-timing-function: linear;
          animation-name: bounceIn;
          animation-fill-mode: both;
          animation-duration: 1s;
          animation-iteration-count: 1;
          animation-timing-function: linear;
      }
  
      form {
          margin: 0 auto;
          margin-top: 20px;
      }
  
      label {
          color: #555;
          display: inline-block;
          margin-right: 18px;
          padding-top: 10px;
          font-size: 14px;
          direction: rtl;
          float: right;
      }
  
      p a {
          font-size: 11px;
          color: #aaa;
          float: right;
          margin-top: -13px;
          margin-right: 20px;
          -webkit-transition: all .4s ease;
          -moz-transition: all .4s ease;
          transition: all .4s ease;
      }
  
      p a:hover {
          color: #555;
      }
  
      input {
          font-family: "Helvetica Neue", Helvetica, sans-serif;
          font-size: 12px;
          outline: none;
      }
  
      input[type=tel],
      input[type=password] {
          color: #777;
          padding-left: 10px;
          margin: 10px;
          margin-top: 12px;
          margin-left: 18px;
          width: 290px;
          height: 35px;
          border: 1px solid #c7d0d2;
          border-radius: 2px;
          box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
          -webkit-transition: all .4s ease;
          -moz-transition: all .4s ease;
          transition: all .4s ease;
      }
  
      input[type=tel]:hover,
      input[type=password]:hover {
          border: 1px solid #b6bfc0;
          box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8;
      }
  
      input[type=tel]:focus,
      input[type=password]:focus {
          border: 1px solid #a8c9e4;
          box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
      }
  
      #lower {
          background: #ecf2f5;
          width: 100%;
          height: 69px;
          margin-top: 20px;
          box-shadow: inset 0 1px 1px #fff;
          border-top: 1px solid #ccc;
          border-bottom-right-radius: 3px;
          border-bottom-left-radius: 3px;
      }
  
      input[type=checkbox] {
          margin-top: 10px;
          float: right;
          margin-right: 30px;
      }
  
      .check {
          margin-left: 3px;
          margin-right: 5px;
          font-size: 11px;
          color: #444;
          text-shadow: 0 1px 0 #fff;
          float: right;
  
      }
  
      input[type=submit] {
          float: left;
          margin-left: 20px;
          margin-top: 20px;
          width: 80px;
          height: 30px;
          font-size: 14px;
          font-weight: bold;
          color: #fff;
          background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef),to(#6ec2e8));
          background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
          background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
          border-radius: 30px;
          border: 1px solid #66add6;
          box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
          cursor: pointer;
      }
  
      input[type=submit]:hover {
          background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8));
          background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
          background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
      }
  
      input[type=submit]:active {
          background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8),   to(#b6e2ff));
          background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
          background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
      }
      .footer{
          background-color: #555555;
          border-top: 1px solid #FFFFFF;
          clear: both;
          color: #FFFFFF;
          font-size: 12px;
          height: 64px;
          line-height: 19px;
          margin-top: -69px;
          padding-top: 4px;
          position: absolute;
          direction: rtl;
          font-family: tahoma;
          font-size: 13px;
          text-align: center;
          line-height: 19px;
  
  
      }
      .footer a {
          color: #FFFFFF;
          text-decoration: none;
      }
  </code></pre>