Padding Probelm

HTML & CSS
1

I have this site I am about to launch and I can not figure out why on the home page the text that is suppose to be on the left side of the footer (with 30px of padding) is more like 175px. The home page is a bit unique and has it’s own css but still. Cant seem to figure this one out.

Many thanks,
Houston

2

We won’t be able to figure it out either until we see some code. :slight_smile:

3

I thought the users in here would be able to view the code from the site itself. But here is the css footer code. I am assuming this is what you are asking.


 #footer {
    color:#FFF;
    background:url(../images/construct/footerBkgd_home.jpg) no-repeat top left;
    font-size:70%;
    width:840px;
    padding: 8px 30px 61px 30px;
    margin:0px auto;
}
 #footer #credits{
    float:right;
    text-align:right;
    width:300px;
}
 #footer p {
    margin: 0; 
    padding:0;
}
 #footer a {
    color:#FFF;
    text-decoration:none;
}
 #footer a:hover {
    text-decoration:underline;
}
4

Hi, I deduced that code was from your signature link. We arne’t mind readers ya know :slight_smile:
http://www.splitlightdesigns.com/

You nest the footer outside of everything else, thus the margin:auto is making it sit in the center of the page. You should probably do some rethinking as to the way the structure is setup to fix this (I’ll help in the morning/late evening if noones helped by then/you haven’t figured it out, I have to go now)

:slight_smile:

5

I am soooo, sorry. I didn’t realize that I didn’t even put the link to the website in question.

The link is: http://www.hbip.com/jenna/

Sorry about that.

6

Got it figured out. Even though you were talking about the footer being outside the wrapper, that gave me some other ideas for the actual site in question. So I got it fixed now. Sometimes you just need someone to force you on a different tact.

7

Could you explain what you did to fix for those who might come across a similar issue? :slight_smile:

8

I moved the FOOTER div back up into the containing div and since this home page is just really one big CONTENT background I just increased the bottom-padding on the content div to include the entire background image and then placed the footer right after that. Worked perfect.