Jump to content

Footer Problem


kitster79

Recommended Posts

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;
}

Link to comment
Share on other sites

Ah, thank you so very much. So the problem was the top-margin on #footerContent?

 

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.

Link to comment
Share on other sites

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.

Edited by Wickham
Link to comment
Share on other sites

Yes, that fixes the issue for the "Our Program" page but because I am using floats on #contentHomeLeft and #contentHomeright divs, it screws the home page up now...

 

http://vojodesign.com/proofs/jacquelynHernandez/website/ourProgram.html

http://vojodesign.com/proofs/jacquelynHernandez/website/index.html

 

I guess my question should now be, how do I get #contentHome to expand to allow room for those two floating divs?

 

Thanks

Link to comment
Share on other sites

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 





     



.....................

 

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.

Edited by Wickham
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...