Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

MARGIN:AUTO is not centering and making page WIDER!

Please help me!

7:34 pm on Jun 23, 2013 (gmt 0)

New User

joined:June 23, 2013
posts: 2
votes: 0

Hi, everyone! I am designing a website in WordPress with the Thematic framework. I am having an issue that has not occurred before when using this theme for other sites that I created.

The div DOES NOT center. If I use margin:auto, it moves away from the left but also adds space to the right side, which makes the web page WIDER. This is obviously not the look that I am going for. If I don't use margin: auto, it is left justified. I did the code validation and worked through it. Nothing really jumped out as the reason. I used Firebug and nothing works. Could a fresh and more experienced set of eyes take a look and suggest a way (or ways) to fix this?



[edited by: bill at 8:01 am (utc) on Jun 24, 2013]
[edit reason] No links to examples or your sites as per TOS [/edit]

8:49 pm on June 23, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

joined:Apr 9, 2011
votes: 244

:: detour to site, quick, before link is deleted ::

Ouch. You've got five external stylesheets, wads of separate CSS declarations-- including at least one in the <body>-- AND inline styles. Get that all cleaned up and organized, and you may well find that the problems fix themselves.

:: further detour to Web Inspector, followed by downloading page and fine-tooth-combing CSS ::

Well. That's an hour of my life I'll never see again.

At first glance, the problem seemed to be in the social-media icons. Comment them out and the problem goes away. Leave them in, and the social-media bar behaves as if it were set for position: relative with a substantial left-offset.

But the real problem is
ul.xoxo {
position: relative;
top: -50px;
right: -400px;

The problem only manifests itself if the ul has visible content-- here, the icons.

Yes, OK, so I was mistaken. Not a left offset but a negative right offset.

In short: The page is doing exactly what you've told it to do ;)

Incidentally, the main image is way too big. Filesize, not physical dimensions. You can easily get it down to 100k by changing to a lightly compressed jpg. The png format doesn't generally work well with subtle color gradations.
9:31 pm on June 23, 2013 (gmt 0)

New User

joined:June 23, 2013
posts: 2
votes: 0

Wow, thanks so much! I just now have to figure out how to get the icons to position properly without messing up the layout.