Can someone analyze my code? I need the footer to stay under the content area…
Posted: 14 August 2009 09:37 PM   [ Ignore ]
Newbie
Rank
Total Posts:  1
Joined  2009-08-14

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:

htmlbody {
    height
100%;
    
margin0;
    
padding0;
    
}

body {
    background
-imageurl(images/bodyBG.jpg);
    
background-repeatrepeat-x;
    
text-aligncenter;
    
background-color#333333;
    
}


#wrapper {
    
width804px;
    
z-index1;
    
margin-leftauto;
     
margin-rightauto;
     
text-alignleft;
    
positionrelative;
    
min-height100%;
    
}
    
    
#logo {
    
width248px;
    
height118px;
    
positionabsolute;
}

#menu {
    
width554px;
    
height118px;
    
positionabsolute;
    
margin-left248px;
    
background-imageurl(images/menuBG.jpg);
    
background-repeatrepeat-x;
    
background-positiontop;
        
displayblock;
        
padding-top45px;
}

#tagline {
    
width248px;
    
height246px;
    
positionabsolute;
    
margin-top118px;
}

#slider {
    
width554px;
    
height246px;
    
positionabsolute;
    
margin-left248px;
    
margin-top118px;
}

.clear {
    clear
:both
}

#homeSlider {
    
position:relative;
    
width534px;
    
height246px;
}
    
#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"Timesserif;
    
}

    
#homeSlider .caption .content {
        
margin-left:20px;
        
margin-top15px;
        
margin-bottom10px;
        
margin-right20px;
        
font-familyArialHelveticasans-serif;
        
font-size12px;
    
}
    
    
#homeSlider .caption .content h3 {
        
margin:0;
        
padding:0;
        
color:#cccccc;
        
font-familyArialHelveticasans-serif;
        
font-size18px;
    
}


#mainArea {
    
width762px;
    
background-color#ffffff;
    
margin-top364px;
    
background-imageurl(images/mainAreaBG.jpg);
    
background-positionbottom;
    
background-repeatrepeat-x;
    
padding35px 20px;
    
positionabsolute;
    
}

#left {
    
width219px;
    
float:left;
    
padding:0 0 0;
}

#right {
    
width520px;
    
floatright;
    
}

#footer {
    
width844px;
    
background-color#000000;
    
bottom0;
    
margin-leftauto;
     
margin-rightauto;
     
text-alignleft;
    
positionrelative;
    
height368px;

Profile
 
 
Posted: 17 August 2009 12:47 AM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  8
Joined  2009-08-02

try adding a top margin

Profile