CSS Charity Template footer position

hi everyone

i'm new with CSS, and have figured out most of the stuff with the Charity Template's stylesheet. I have increased the "content" area's height, an tweaked the "header" abit. the thing is, i can't seem to get the footer in the right place when the "content" area's height is increased, which is below the content area....maybe its got something to do with "clear:both"? have tried using margins but that didn't work.

the site isn't up on a server yet,, its still in its design stage. any help would be awesomely appreciated.

Thank you

 

here's the code:

body {
background-color:#a6bf79;
color:#000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 10px 10px;
padding: 0px;
}
.clear{clear:both;}
* {
margin: 0px;
padding: 0px;
}
#container {
margin: 0px auto;
text-align: left;
width: 717px;
}
a{
font-size:12px;
}
p{
margin: 15px 0px;
}
/********************** Header ***************************/
#header {
margin: 2em 0em 2em 0em;
background-image:url(images/newcfp2.jpg); border: 3px solid;
background-repeat:no-repeat;
background-position:center center;


width:59.3em;
height:15em;
position:relative;
}

/*link bar**/

#header ul{
background-color:#85a157;
width:710px;
border: 3px solid #FFFFFF;
display:block;
top:25em;
position:absolute;

/*link bar position, left right top down*/

margin: -9.8em 0em 0em -0.2em;
height:22px;
padding:0.3em 0.1em 0em 0em;
text-align:center;
}
#header li{
display:inline;
}
#header ul a{
text-decoration:none;
color:#FFFFFF;
margin: 0px 15px;
}
#header ul a:hover{
text-decoration:underline;
color:#28556b;
}
#logo_w1,#logo_w2 {
font-size: 24px;
font-style:italic;
color:#FFFFFF;
position:absolute;
}
#logo_w1{
top:15px;
left:70px;
}
#logo_w2{
top:44px;
left:94px;
}
#header_text {
top:90px;
left:43px;
width:230px;
position:absolute;
}
#header_text p{
font-size: 18px;
color:#FFFFFF;
}
#header_text a{color:#28556b;}
#header_text a:hover{color:#c77e0c;}
/********************** Content ***************************/
#content {

/**CONTENT LAYER POSITIONING**/

margin: 5em 0em 0em 0em;

background-image:url(images/content_bg.gif);
border: 3px solid;

background-position:center center;
width:59.8em;
height:40.5em;
}
img{
border-width:0px;
}
h1{
color:#000000;
font-size:14px;
margin: 20px 0px 20px 0px;
}

h2{
color:#85a157;
font-size:14px;
text-align:center;
width:200px;
margin: 10px 0px 15px 0px;
}
#left {
float:left;
width:428px;
margin-left:27px;
padding: 0px 10px 30px 0px;
display:inline;
}
#left a{color:#28556b;}
#left a:hover{color:#c77e0c;}
#photos a{
margin-right:14px;
}
#right {
float:right;
width:210px;
padding: 0px 20px 20px 20px;
margin-top:10px;
border-left: #FFF 2px solid;

}
#right a{
color:#c77e0c;
}
#right a:hover{
color:#85a157;
}
/********************** Footer ***************************/
#footerline {

clear:both;

background-image:url(images/footer_bg.gif);
border: 3px solid;\
height: 1em;





}



#footer {
width:717px;
text-align:center;
padding: 20px 0px;
}

 

Do you have a screen shot of it? I've had this problem before, but it was usuallyl because a code in the page itself was incomplete, or having to do with the dimensions all together. I'd be able to help you more if i could see what it looked like.

 

Hi Judia,

I added a container at #footer and it got fixed. Don't quite know if that fixed it though

Thank you.