No replies
Viren Negi
Offline
newbie
Last seen: 10 years 27 weeks ago
Timezone: GMT+5.5
Joined: 2011-12-19
Posts: 2
Points: 4

Hello Guys,
If I had a "div" and If position it to center of the page using relative property

and the page contain a sticky footer(copy from google fetch result)

On reducing the height of the browser the footer overlap the "div" the same does not occur if I don't position the div to center of the page

Here the code

<div class="login-wrapper grid_8 prefix_4 suffix_4">
  <div class="login">
    <div class="header">
      <h2>Sign in</h2>
    </div>
   <div class="form-content">
    <form accept-charset="UTF-8" action="/users/sign_in" class="user_new" id="user_new" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="dnzbcdAKSAm2Lql5guJuX3G2TiMSUJm/tH14NqrgOAs="></div>
     <table>
      <tbody><tr>
        <td colspan="2"> 
        <input class="textfield" id="user_email" name="user[email]" placeholder="Email" size="30" type="email" value="">
        </td>
      </tr>
      <tr>
        <td colspan="2"> 
          <input class="textfield" id="user_password" name="user[password]" placeholder="Password" size="30" type="password">
        </td>  
      </tr> 
 
     </tbody></table> 
 
      <div class="login-button">
 
          <input class="button" name="commit" type="submit" value="Sign in"> 
            <input name="user[remember_me]" type="hidden" value="0"><input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1"> <label for="user_remember_me">Remember me</label>
 
 
      </div>
</form>   </div> 
  </div>
</div>

Here is the CSS applied

    div.login-wrapper {
  /* The below position causes overlap with sticky-footer
 
  position:relative;
  top : 200px */
  height: 100%;
 
}
 
div.login {
  margin : 0px;
  padding: 0px;
  text-align: center;
  border: 1px groove #ccc;
  font-family: Purisa;
  height: 300px; 
 
}
 
div.login div.header {
 
  background-color: #FFFDD0;
  text-decoration: underline;
  border-bottom: 1px groove #999;
 
 
}
 
div.login h2 {
  text-align: center;
  padding-top: 13px;
 
}
 
 
div.form-content {
  padding: 20px;
}
 
div.login table {
 
  width : 100% ;
  height : 100% ;
}
 
div.login table tr {
  width : 500px;
  height: 50px;
}
 
div.login table tr td input.textfield {
  width : 300px;
  height : 30px;
}
 
div.login-button .button {
  width : 100px;
  height : 50px;
  margin-left : 90px; 
}
 

Attaching the ScreenShoot for help

Thanks in Advance

Regards

Viren

AttachmentSize
without-positioning.png135.15 KB
with-positioning.png139.75 KB