Footer moves when I convert to WP Theme

I’m suspecting that it might have something to do with the page.php or loop-page.php. Because it worked before I added those to the directory. I’m just at a loss here. Thanks!

Try not specify fixed height for your #container

Irfan

*facepalm*

Thanks irfan! I can’t believe I did that.

I also had the min-height set too long, so if the page had little content, the footer hung off the bottom. I started to ask about that on here but I was able to figure that one out. Thanks again!

Alright, I had to change some layout issues and it broke my footer again. I’ve spent several hours now trying to fix it when I realized that there was some duplicate code coming in from the page.php file. Anyway, I cleaned that up and I still have this issue. I know my code isn’t the best, but I usually can figure this crap out.

https://www.thegoblinmarketrestaurant.com – Is it my bad code or am I doing something wrong with the theme setup?

Yeah, it’s a little messy, but try this:

Put the footer INSIDE the div CONTENT. At the end.

Then, on your #footer css, put this:

#footer {
position: absolute;
bottom: 0;
left: 0;
}

and

#footer .fnavbar {
position: relative;
bottom: 0px;
left: -15px;
background-image: url(images/bot_nav.png);
background-repeat: no-repeat;
width: 829px;
height: 54px;
z-index: 20;
}

That should work.

diogorighi – thanks for the idea but that just moved it further left.

OK, after looking into it more, when you view source, it’s closing off my ‘content’ and ‘container’ div before the footer. It has to have something to do with the way the page is being looped in. In the view source you can see it’s pulling a lot of extra code for the stuff that’s usually in the side bar, like the meta stuff. Somewhere in there it’s closing out my 2 divs which is putting the footer outside of the container.

The problem is that you are using absolute positioning in almost everything! You don’t need to do that.

If you want to center something, just give it a width and use margin:0 auto; if you want to put something OUTSITE the box, then you use the absolute position.

The absolute position os the element is relative to the first parent with position:relative.

The footer it’s not on the bottom because the content is position:absolute; and his height do not interfere with the page. You can see that if you take out the min-height.

You will have better results if you remake your code.

Right, like I said, I’m not that great with the CSS. Just never wrapped my brain around the positioning stuff. Oh well, life goes on.

Anyway, I found the problem that I was having. I had a rogue </div> tag in the loop-page.php code. That was closing out my container div and the footer was out on it’s own in the cold. I have that fixed now, so it’s just time to get the footer to go where I tell it.

Once I get it all figured out and it’s working, I’ll learn more about positioning and try to rebuild it more efficiently ??

Thanks!