DIV content overflows into footer, makes footer go upward on page

Question

IM trying to get the div content not to flow past the footer, I want the content div to expand as the page expands, but when the text goes past the footer, it causes the footer to jump upward on the page
html, body { margin:0; /top, right, bottom, left/ padding:0; /top, right, bottom, left/ height:100%; }

container {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    margin: 0 auto -100px;
    height: auto;
    min-height:100%;
}

content {
    position: relative; 
    padding-bottom:100px;
    overflow:auto;
    height:100%;
}

Header, #Footer {
    position: absolute;
    width:100%;
    background:url('bglines.png');
    background-size:15px 15px;
    color:white;
    padding:0 auto;
    text-align:center;
    color:#2FAACE;
}

Footer {
    margin-top: 100px;
    clear:both;
} 

menu {
    position:absolute;
    list-style-type:none;
    background: #808080;
    width:100%;
    padding: 85px 0px 0px 0px; /* Always on top */
}

ptop {
    text-transform:uppercase;
    font-family:impact;
    font-size:40pt;
    margin: 15px auto;
    color:#2FAACE;
}

pbottom {
    font-family:times;
    font-size:14pt;
    color:#2FAACE;
}

main {
position: absolute;
text-align:center;
left:50%;
width:90%;
margin-left: -45%;
top:150px;
color:white;
padding-bottom:100px;
}

p {
    font-size: 75px;
    color:white;
}

mainbg {
    background:#CCCCCC;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    opacity:0.9;
    filter:alpha(opacity=90); /* For IE8 and earlier */
    left:50px;
    width:95%;
    top:150px;
    position: absolute;
}

li {
    line-height:40px;
    margin:0px 0px 0px 0px;
    padding:0px 5px 5px 0px;
    text-align:center;
    float:left;
}

a, a:hover {
display:block;
font-family:Georgia;
width: 75px;
text-decoration:none;
font-size:30px;
}

a { color:white; }

a:Hover {
    background:#2FAACE;
    border-radius:9px 9px 9px 9px;
    color:#FFFFFF; /*TL, TR, BR, BL*/
}

Dips Dips · Accepted Answer · 2012-07-02T02:09:02

Please add a div with clear:both before footer. It actually clears all floating which fixes the footer to stay at bottom.

<div style="clear:both;"></div>

OR if you have defined class (clear) in your style then

<div class="clear"></div>

DIV content overflows into footer, makes footer go upward on page

1 Answers