Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

justinm

macrumors member
Original poster
Aug 15, 2007
93
0
Orlando FL
I am having some issues with my self hosted wordpress blog. My footer is misaligned. I don't understand why. I have tried multiple browsers. Here is an image of the problem. The URL is http://jntechhelp.com (Hope you guys like it! ;) Thanks!

BTW, if you need any files like the CSS just let me know.
 

Attachments

  • Picture 1.png
    Picture 1.png
    18.5 KB · Views: 108
padding

You have a div styled like this:
Code:
#wrapper {
	clear: both;
	width: 920px;
	margin: 0 auto;
	padding: 0 20px;
	text-align: left;
	background: url("../images/wrapper-bg.png") repeat-y 0 0;
}

the padding that you are using gives it 0 on top and bottom, and 20px left and right. This is pushing the footer over since it is nested in the wrapper div. If you change this it looks like it will change a lot of other content too.

An easy fix that might work is giving the footer a negative margin, although this might not be the best approach. Try changing the margin in the #footer definition in your stylesheet to this:
Code:
margin:0 auto 0 -20px;

Better yet, remove the footer div from the wrapper div and style it similar to the wrapper so that they line up. This will prevent the background image in the wrapper div from extending to the bottom of the page past the footer.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.