Well, this looks like a simple solution. You have gone the route of trying to center your all content div using auto with your left and right margins. Which is one way to do it, but you forgot to add a width to you div, without that its pointless. Btw, if you are going to use this way you need to know that some browsers do not center the containing blocks using this method as they ignore the auto margins. These browsers include:
- NN4 (Mac and Win)
- Win/IE4
- Win/IE5
- Win/IE5.5
- Win/IE6 (when in quirks-mode)
By adding two simple rules, this problem can be overcome in all of the browsers mentioned above, excluding NN4.
1. Center the body
While these browsers ignore auto margins, they will follow “text-align: center”. If this is applied to the body, the containing block will center correctly. So, a new rule is added:
Code:
body{ text-align: center;}
.all_content{ margin-left: auto; margin-right: auto; width: 50em;}
2. Resetting text-align
The only problem with this new rule is that all content on the page is now center-aligned. To overcome the center alignment problem, a new declaration is added within the containing block rule set – “text-align: left”. The final CSS code is:
Code:
body{ text-align: center;}
.all_content{ margin-left: auto; margin-right: auto; width: 50em; text-align: left;}