I have an absolute positioned footer which moves up and overlaps content when the

Question

0

Editorial Team

Asked: June 17, 20262026-06-17T14:39:01+00:00 2026-06-17T14:39:01+00:00

I have an absolute positioned footer which moves up and overlaps content when the

0

I have an absolute positioned footer which moves up and overlaps content when the browser window is resized.

Here is the HTML

<!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="../stylesheet/typo.css" rel="stylesheet" type="text/css">  
<link href="../stylesheet/main.css" rel="stylesheet" type="text/css">

</head><body>

<div id="header">
<h1><br>Blah Blah</h1>
&nbsp;&nbsp;
<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="Login" class="login" />
</form>

 </span></div>
 </div>


<div class="contentbox">
<div class="rightcont">
<div id="content" align="left">LoremIpsum </div>


 <img src="../images/imageright.png" style="margin-left:70px">
 </div>
 </div>
 </div>
 <div id="clearfix"></div>
 <div id="footerhome">1400Labs&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 Legal&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Privacy&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 About&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Terms&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Help</div>
 </body>
 </html>

And the CSS

 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;
}
}

Footer Courtesy:http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

jsFiddle:http://jsfiddle.net/anirudhvarma/JLZzs/
I hope I made it clear