title: How to position div above footer use css
body: <p>I have problem with position of div called reklama above footer. On this forum , I found a solution to my problem. I put two selectors into my div. <strong>position: relative; and top: -150px;</strong> But now the size of my footer changed by the size of the reklama's div.
  Thank you for help. </p>
  
  <p>html code:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;link href="css/main.css" rel="stylesheet" type="text/css" media="all" &gt;
          &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js" &gt;&lt;/script&gt; 
          &lt;script type="text/javascript" src="js/zakladki.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/ustawStopke.js"&gt;&lt;/script&gt;
  
      &lt;body&gt;
          &lt;div class="contains"&gt;
              &lt;header class="shadow"&gt;
                  &lt;div class="UpHeader"&gt;
                      &lt;div&gt;
                          &lt;img src="http://www.gimnazjum.org.pl/obrazki/logoG1.JPG" alt="Moje Dane" /&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;span&gt;TEST TESTO&lt;/span&gt;  
                          &lt;span&gt;zwiększ przychody swojej firmy&lt;/span&gt;      
                      &lt;/div&gt;              
                  &lt;/div&gt;
  
  &lt;!--                &lt;div class="DownHeader"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;Home&lt;/li&gt;
                      &lt;li&gt;Pomoc&lt;/li&gt;
                      &lt;li&gt;Zalogowany jako:&lt;/li&gt;
                      &lt;li&gt;Lead-Partner-Punkt&lt;/li&gt;
                      &lt;li&gt;Wyloguj&lt;/li&gt;
  
                  &lt;/ul&gt;
                  &lt;/div&gt;--&gt;
  
              &lt;/header&gt;
              &lt;section&gt;  
                 &lt;div class="logowanie"&gt;                
                      &lt;form action="konto.php" method="POST"&gt;
                          login: &lt;input type="text" name="login" /&gt; &lt;BR/&gt;
                          haslo: &lt;input type="text" name="password" /&gt; &lt;BR/&gt;
                          &lt;button type="submit"&gt; Zatwierdź&lt;/button&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
  
  
              &lt;/section&gt;
  
  
  
              &lt;footer&gt;   
  
                 &lt;div id="reklama" style="position: relative; top: -150px;"&gt;
                      vgcxfhgfc
                 &lt;/div&gt;
  
                  &lt;div class="up"&gt;
                      &lt;div class="dane1"&gt;
                          &lt;span class="info"&gt;test S.A&lt;/span&gt;&lt;BR/&gt;
                          &lt;span class="dane"&gt;ul. test 9, 32,085 test&lt;/span&gt;                        
                      &lt;/div&gt;
  
                      &lt;div class="dane2"&gt;
                          &lt;span class="info"&gt;tel.&lt;/span&gt; &lt;span class="dane"&gt;test &lt;/span&gt;&lt;BR/&gt;
                          &lt;span class="info"&gt;fax.&lt;/span&gt; &lt;span class="dane"&gt;test&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div class="dane3"&gt;
                          &lt;span class="info"&gt;e-mail:&lt;/span&gt;&lt;BR/&gt;
  
                          &lt;span class="dane"&gt;test@test&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="down"&gt;
                      © 2014 Copyright test S.A 
                  &lt;/div&gt;
              &lt;/footer&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>css :</p>
  
  <pre><code>* {
      margin: 0 auto;
  
  }
  
  .contains {
      width: 100%;
      /*height: 100%;*/
      /*height: auto;*/
      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
      font-weight: 300;
      background-color: #f6f6f6;
      /*background-color: #ff6805;*/
  }
  
  header {
      width: 100%;
      background-color: #000000;
      color: white;
      font-family: Verdana;
      padding-bottom: 12px;
      font-size: 0.9vw; /*iMacius*/
      height: 106px;
  }
  
  header .UpHeader {
      width: 60%;
      /*height: auto;*/
      background-color: black;
      float: left;
  }
  
  
  header .UpHeader div img {
      height: 78px;
      width: 78px;
      float: left;
      padding: 20px;
  }
  
  /* napis */
  header .UpHeader div span:first-child {
      color: white;
      float:left;
      padding-top: 50px;
      padding-left: 1px;
      font-size: 1.1em;
      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
      font-weight: 300;
  }
  
  header .UpHeader div span:last-child {
      color: red;
      font-size: 14px;
      float:left;
      padding-top: 52px;
      padding-left: 10px;
      font-size: 0.8vw;
      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
      font-weight: 300;
  }
  
  header .DownHeader{
      width: 40%;
      /*height: auto;*/ /*iMacius*/
      /*height: 18px;     iMacius*/
      background-color: black;
      float: right;
      padding-top: 96px;
      text-align: right;
  
  }
  
  
  header.ul {
      display: block;
      width: 100%;
      list-style-type: none;
  }
  
  header li {
      /*float: right;*/
      display: inline;
      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
      font-weight: 300;
      padding-right: 12px;
  
  }
  
  header li:first-child {
  /*    color:black;
      padding: 12px 10px 12px 12px;
      border: none;
      background-color: #f6f6f6; */
  }
  
  header li:last-child {
      padding: 12px;
      color:black;
      background-color: #f6f6f6;
      border-radius: 2px;
  }
  
  header li:nth-child(3) {
      color: #ff6805;
  /*    padding-right: 12px;*/
  }
  
  .shadow {
      top: -1px;
      -webkit-box-shadow: 0px 6px 10px -2px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 0px 6px 10px -2px rgba(0, 0, 0, 0.3);
      box-shadow:  0 6px 10px -2px rgba(0, 0, 0, 0.3);
      z-index:5;
  }
  
  
  
  section{
      width: 88%;
      /*border: 1px solid black;*/
      padding-top: 20px;
      padding-bottom: 12px;
      clear: both;
      /*background-color: #ff6805*/
  
  }
  
  section.zakladki {
      background-color: pink;
  }
  
  
  
  
  
  footer {
      width: 100%;
      background-color: #353535;
      position: relative;
  /*    position:absolute;
      bottom:0;*/
  
  }
  
  
   footer #reklama {
      width:650px;
      height:100px;
      background: black;
      position: relative;
      top: -150px;
  }
  
  
  footer.up {
      /*background-color: ;*/
      width:100%;
      padding-top: 10px;
  
  }
  
  footer .up .dane1 {
      padding-top: 10px;
      padding-bottom: 10px;
      float:left;
      width:33%;
  
  
  }
  footer .up .dane2 {
      padding-top: 10px;
      float:left;
      width:34%;
  
  }
  footer .up .dane3 {
      padding-top: 10px;
      float:left;
      width:33%;
  
  }
  
  
  /*Pierwsza kolumna*/
  footer .up .dane1 &gt; .info  {
      float: left;
      color: white;
      padding-left: 60px
  }
  
  footer .up .dane1 &gt; .dane  {
      float: left;
      color: gray;
      /*padding-left: 20px*/
  }
  
  /*Druga Kolumna*/
  footer .up .dane2 &gt; .info  {
      float: bottom;
      color: white;
      padding-left: 39%;
  }
  
  footer .up .dane2 &gt; .dane  {
      float: bottom;
      color: gray;
      padding-left: 1%;
  }
  
  /*trzecia Kolumna*/
  footer .up .dane3 &gt; .info  {
      color: white;
      float:right;
      padding-right: 65px;
  }
  
  footer .up .dane3 &gt; .dane  {
      color: gray;
      float:right;
      padding-right: 10px;
  }
  
  footer .down {
      width:100%;
      font-size: 14px;
      color: gray;
      text-align:center;
      padding-top: 5px;
      padding-bottom: 5px;
      clear: both;
      background-color: black;
  }
  
  footer &gt; p {
      font-size: 16px;
  
  }
  
  /*zakladki*/
  UL.mytabs {
      position: relative;
      z-index: 2;
  }
  UL.mytabs, UL.mytabs LI {
      margin: 0;
      padding: 0;
      list-style: none;
      float: bottom;
  }
  UL.mytabs LI { padding-right: 2px; }
  
  UL.mytabs LI A {
      float: left;
      padding-left: 22px;
          padding-top: 12px;
          padding-right: 22px;
          padding-bottom: 12px;
      /*border: 1px solid #E0E0E0;*/
      border-bottom: 1px solid #E0E0E0;
      background: #F5F5F5;
      text-decoration: none;
      color: black;
      height: 22px;
  }
  
  
  UL.mytabs LI A[href^="zak1"] {
      color:black;
          background:#f6f6f6 url(../img/mojeLeady.png) no-repeat 0 0;
          background-position: 7px 7px;
          padding-left: 50px;
          display:block;
          font-size: 0.85em;
  
  /*        height:20px;
          width:100px;*/
  }
  
  UL.mytabs LI A[href="zak1.html"]:hover {
          color:#ff6805;
          background:#f6f6f6 url(../img/mojeLeady.png) no-repeat 0 0;
          background-position: 7px 7px;
          padding-left: 50px;
          display:block;
          font-size: 0.85em;
  }
  
  UL.mytabs LI.current A[href="zak1.html"]{
          color:white;
          background:#ff6805 url(../img/mojeLeady.png) no-repeat 0 0;
          background-position: 7px 7px;
          padding-left: 50px;
          display:block;
          font-size: 0.85em;
  }
  
  
  UL.mytabs LI A:HOVER, UL.mytabs LI.current A {
      background: #FFFFFF;    
  }
  UL.mytabs LI.current A {
      font-size: 16px;
      /*border: 1px solid #ff6805;*/
      color: white;
      background-color: #ff6805;
  }
  .mytabs-container {
      position: relative;
      z-index: 1;
      clear: both;
  /*  border: 3px solid #ff6805; */
      border-top-color:#ff6805;
      border-style: solid;
      padding: 10px;
      overflow: hidden;
  /*     border-bottom-width: 0px; */
      border-width: 1px 0px 0px 0px;
  
      top: -1px;
          -webkit-box-shadow: 0px 6px 10px -2px rgba(0, 0, 0, 0.3);
          -moz-box-shadow: 0px 6px 10px -2px rgba(0, 0, 0, 0.3);
          box-shadow:  0 6px 10px -2px rgba(0, 0, 0, 0.3);
          z-index:5;
  }
  
  
  
  
  .zwyklyLink {
      text-decoration: none;
      color: black;
      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
      font-weight: 300;
  }
  
  .zmianaHasla {
      float: bottom;
      width: 300px;
  }
  
  
  
  
  .zmianaHasla button[type="submit"] {
    background: url(../img/btn-bg.png);
    border-radius: 3px;
    border: 0;
    clear: both;
    line-height: 37px;
    height: 37px;
    width: 200px;
    color: #FFF;
    font-size: 18px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;
    float: right;
  }
  </code></pre>