I have found numerous forums, tutorials and articles on keeping the footer below the content and how to keep it below the content area as the content grows. I think there’s something wrong with my code that’s preventing any of these methods from working.
Here is the test site:
http://freedomroctest.x10hosting.com/template1.html
As you can see, the footer kinda “sticks” to the middle of the page instead of staying underneath the mainArea as the divs inside the mainArea grow with content.
I’ve been pulling my hair out for the last two days trying to figure out what I’m doing wrong.
Please don’t direct me to another article or forum post…that’s all I’ve been getting…I need my particular code looked at and analyzed to tell me how to make it work. is it because of the jquery i’m using? am i missing something? do i need to remove something?
any one-on-one help is super appreciated!
there’s not enough characters for me to post the html, so here is the css for reference:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: url(images/bodyBG.jpg);
background-repeat: repeat-x;
text-align: center;
background-color: #333333;
}
#wrapper {
width: 804px;
z-index: 1;
margin-left: auto;
margin-right: auto;
text-align: left;
position: relative;
min-height: 100%;
}
#logo {
width: 248px;
height: 118px;
position: absolute;
}
#menu {
width: 554px;
height: 118px;
position: absolute;
margin-left: 248px;
background-image: url(images/menuBG.jpg);
background-repeat: repeat-x;
background-position: top;
display: block;
padding-top: 45px;
}
#tagline {
width: 248px;
height: 246px;
position: absolute;
margin-top: 118px;
}
#slider {
width: 554px;
height: 246px;
position: absolute;
margin-left: 248px;
margin-top: 118px;
}
.clear {
clear:both
}
#homeSlider {
position:relative;
width: 534px;
height: 246px;
}
#homeSlider a {
float:left;
position:absolute;
}
#homeSlider a img {
border:none;
}
#homeSlider a.show {
z-index:500;
}
#homeSlider .caption {
z-index:600;
background-color:#000;
color:#ffffff;
height:75px;
width:100%;
position:absolute;
bottom:0;
font-family: "Times New Roman", Times, serif;
}
#homeSlider .caption .content {
margin-left:20px;
margin-top: 15px;
margin-bottom: 10px;
margin-right: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#homeSlider .caption .content h3 {
margin:0;
padding:0;
color:#cccccc;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}
#mainArea {
width: 762px;
background-color: #ffffff;
margin-top: 364px;
background-image: url(images/mainAreaBG.jpg);
background-position: bottom;
background-repeat: repeat-x;
padding: 35px 20px;
position: absolute;
}
#left {
width: 219px;
float:left;
padding:0 0 0;
}
#right {
width: 520px;
float: right;
}
#footer {
width: 844px;
background-color: #000000;
bottom: 0;
margin-left: auto;
margin-right: auto;
text-align: left;
position: relative;
height: 368px;
}