homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

MARGIN:AUTO is not centering and making page WIDER!
Please help me!

Msg#: 4586908 posted 7:34 pm on Jun 23, 2013 (gmt 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]



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

Msg#: 4586908 posted 8:49 pm on Jun 23, 2013 (gmt 0)

:: 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.


Msg#: 4586908 posted 9:31 pm on Jun 23, 2013 (gmt 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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved