Edit like this:-

#footerContent {                    
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    /*margin-top: 170px;*/
    position: relative;
    height: 200px;/*22px;*/
}
#footerCopyright {
    position: absolute;
    top: 170px;/*0px;*/
    width: 490px;
    right: 0px;
    text-align: right;
}
#footerContactInfo {
    position: absolute;
    left: 0px;
    top: 170px;/*0px;*/
    width: 350px;
}

That was the main problem, but note the edited height in #footerContent and then the different top position in the other two divs because #footerContent now has a height of 200px and the text items need to start near the bottom of it.

For that page you have heights for two divs that are affecting the position of the footer, so removing the heights lets the divs take only as much height as they need:-

#contentHome {                                    
    /*height: 160px;*/
}
#contentOurProgram {
    /*height: 1000px;*/
}

Height: 160px; was too little for the content so the footer was over the lower content, but removing that height meant that the height: 1000px became operative, which left a large space.

If you have used the same styles on other pages, check them.

Last edited by Wickham (November 17, 2009 2:24 pm)

Add this style to the bottom of the jcStyles.css stylesheet:-
.clear { clear: both; width: 100%; height: 0; visibility: none; }

and add this div into the index.html page just before the closing tag of the container for the two floated divs:-

.................call us at (222) 222-2222 

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

<div class="clear">&nbsp;</div>    <!--clear div added-->

  </div>
  <!-- InstanceEndEditable --></div>
<div id="footer">.....................

A non-floated nil height invisible div drags down the background over the floated divs. I used the same css file as for the program.html file so it shouldn't affect that one.

Last edited by Wickham (November 17, 2009 4:05 pm)