Having problems centering web page within browser(s)
 

Okay so I am essentially just trying to get the core content of this webpage to be centered within a browser. So if a user were to keep resizing the browser, the content would get re-positioned accordingly.

There must be something wrong with my code because although I have tried setting the margins to "auto" it still does not seem to be working correctly. I've spent enough time trying to figure out my mistake but now I feel I need to enlist some help. Here is the code for the HTML and CSS files:

CSS Part:

I'm just having problems finding where I messed up. I have attached a jpeg of what the site looks like right now. Any help would be greatly appreciated.

You will kick yourself for this one...

You need to add 'text-align:center' to your body CSS.

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

Thank you for the responses. Chris, your idea worked although I am a bit confused as to why I have to use the "width: 50em;" part of the code... I'd prefer if the main DIV portions could re-center when I re-size the browser window.

Other than that it's worked perfectly.

If you don't give the div a width, it will not center, instead it will resize to the maximum space available, like the size of the parent container which is probably the browser window.

divs by default: take the maximum width, and expands the height to encompass everything inside it.

Wojjie is correct, d'Anconia. In order for a div to be centered upon the page it has to have a specific width. Think about it this way, say you are a browser and someone tells you hey I want to put auto margins on the sides of this div, meaning they equal on both sides, and have 0 margins on the top and bottom. You say ok, I can do that! But then you realize, how can I make the margins equal on either side of the div if I don't know the width of the div? If the browser doesn't have a number to start with and subtract the difference from the total width of the user's browser then there is no way to find out how to make the margins equal on the sides. Does that make sense??

Also, it doesn't have to be 50em. It can be any width that you want and in any form-percent, em, px. That is entirely up to you.

Okay, thank you for the follow-up responses. I will tamper with things a little bit tonight (or tomorrow) and let you guys know how it goes. What you're saying makes sense and I think what I pictured in my mind is the possibility of setting the div width as a percentage of the entire browser window. I will have to see how this affects the text within the divs, etc, especially if DIVs inside of the outer DIV are in fixed px or em width.

In case you couldn't tell I'm a bit of a beginner at this but having helpful people like you guys on this forum saves me a bunch of time and heartache. Thanks for the responses!