I have an absolute positioned footer which moves up and overlaps content when the browser window is resized.Here is the HTML\[code\]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>FOO</title><link href="http://stackoverflow.com/questions/stylesheet/typo.css" rel="stylesheet" type="text/css"> <link href="http://stackoverflow.com/questions/stylesheet/main.css" rel="stylesheet" type="text/css"></head><body><div id="header"><h1><br>Blah Blah</h1> <h5 style="overflow:hidden">Foo</h5></div><div id="container"><div class="loginbox"><div class="innerlogin" align="left"><span wicket:id="topPanel"> <h3>Please Login</h3><br><br><form style="margin:0"><label for="name">Username</label><br><input type="text" name="name" class="styledinput" /><br><label for="password">Password</label><br><input type="password" class="styledinput" /><br><br><input type="submit" value="http://stackoverflow.com/questions/14434230/Login" class="login" /></form> </span></div> </div><div class="contentbox"><div class="rightcont"><div id="content" align="left">LoremIpsum </div> <img src="http://stackoverflow.com/questions/images/imageright.png" style="margin-left:70px"> </div> </div> </div> <div id="clearfix"></div> <div id="footerhome">1400Labs Legal Privacy About Terms Help</div> </body> </html>\[/code\]And the CSS\[code\] body {margin: 0px;padding-bottom: 100px;border-width: 0px;height: 100%;background: #e1d8d8; } #header {width: 100%;margin: 0px auto;padding-left: 12.85%;background-color: #205081; /*#4f4f4f#205081*/position: relative;height: 80px; } #footerhome {position: absolute;bottom: 0;float: left;width: 100%;height: 100px; /* Height of the footer */background: #fff;font-size: 10px;text-align: center;margin-top: auto;clear: both; } /*Heading Spans*/ h1 {font-family: Arial;color: #FFF;margin: 0;padding: 0; } h5 {font-family: Arial;color: #FFF;margin: 0;padding: 0; } h3 {color: #205080;font-family: Arial; } /*Menu Table*/ #menutable {margin-top: 10px;border-spacing: 25px;background: #4f4f4f; } /*Content Divs*/ .loginbox {width: 30.666%;margin-top: 15%;float: right;margin-right: 12.5%;display: inline; } .contentbox {width: 30.666%;margin-top: 15%;float: left;margin-left: 12.5%; } .rightcont {position: relative;width: 30em;height: 18em;margin-top: -9em; /*set to a negative number 1/2 of your height*/margin-left: -20em border: 2px solid #ccc;background: transparent padding-bottom:0px;padding-top: 10px; } .innerlogin {position: fixed width:30em;height: 18em;margin-top: -9em; /*set to a negative number 1/2 of your height*/margin-left: -15em border: 2px solid #ccc;padding-bottom: 0px;background: transparent;padding-top: 100px;padding-left: 100px; } /*Form Elements*/ .login {background: #205080;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;border: none;color: #FFF;font-weight: bold;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);height: 25px;width: 60px;" } label {font-size: 12px;font-family: Arial;color: #205080;text-align: left; }.styledinput {border-radius: 4px}/*content*/#content {color: #205080;font-size: 14px;width: 320px;margin-left: 100px;}#container {width: 1000px;margin: 0 auto;padding-top: 30px;padding-bottom: 20px;clear: both;margin-bottom: 100px;}#clearfix {clear: both;}@media screen and (max-width: 1000px) {.contentbox { width: 30.666%; margin-top: 15%; float: left; margin-left: 0%;}.loginbox { width: 30.666%; margin-top: 15%; float: right; margin-right: 12.5%; margin-left: 0; display: block;}#container { width: 1000px; margin: 0 auto; padding-top: 30px; padding-bottom: 20px; clear: both; margin-bottom: 100px; margin-bottom: 100px;}}\[/code\]Footer Courtesy:http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-pageI hope I made it clear
Footer “Jumps Up” on resizing window
- Thread starter rokin-k
- Start date