Hello all,

I'm new to html and programming in general. More of a hardware guy really, so be easy.

The information I'm looking for is on how to keep page content centered if the browser window is resized. My search efforts have only returned results on how to resize the window to fit the content. I guess I'm not searching the right terms? What I'm trying to achieve is how YouTube keeps itself centered, whether the window fits just right or if the screen is widened and ends up with whitespace on both sides.

I'm good at figuring things out on my own for the most part, I really just need to be pointed in the right direction.


oh and, lackofinspiration.net if anybody feels like critiquing my code. (not my lack of inspiration, lol)

First you must stop to use absolute positioning the way you do. Remove it altogether. Then you need to slap a doctype on so IE isn't in Quirks Mode. HTML 4.01 Transitional is probably the best for you.
http://htmlhelp.com/tools/validator/doctype.html
http://hsivonen.iki.fi/doctype/

Then it's simple. Use CSS and set the left and right margins of the outer DIV to 'auto'.

Many thanks for your assistance pandy! I added the doctype as you said. I didn't know it was a requirement, but I'll keep it in mind from now on.

I trashed the absolute positioning as you suggested and got what I was looking for using margin-left: auto and margin-right: auto. It works great with Firefox, but for whatever reason IE throws it to the left side of the page. Not that big of an issue right now, I'll figure it out later.

Thanks for your help.

There you see. Less i more.

IE is still in quirks mode because you used the short version of the doctype. In quirks mode it behaves as older versions of itself and doesn't understand fancy stuff like auto margins. Read the second page I linked to above. This is a mess, but basically a long doctype with an URL will get you standards mode (or close to).

Note that this "doctype switching" is a browser invention. It's not the same as strict or transitional HTML, even if standards mode also is called strict mode. The first browser that did it, IE5 Mac, just happened to choose how the doctype is written as a trigger and all other browsers followed the example.

What you can also do to take care of IE is just put text-align:center on your body element and it should solve the issue.

Yeah, but why use something that's wrong when it isn't necessary? Besides, there are other reasons to use a proper doctype and with a proper doctype that hack won't work in IE either.

Are you saying that with a complete (and correct) doctype, all IE versions render margin: 0 auto; correctly? I suppose that should be as of IE6+.

Ok, I'm now a firm believer in what a proper doctype can do for me. I got so stuck on that validator link you posted I forgot to read the second link you provided. After reading it, I went with the strict.dtd and it COMPLETELY chewed my page up... lol BUT, it was chewed up the exact same way in both IE and Firefox. So after a little code correction, everything now looks damn good in both browsers.

Thank you again pandy. I don't know how long it would have taken me to figure that out on my own, if I ever did at all.

Yes, from IE6.

Yes, that is the advantage. Minimal browser differences. They'll still be there, but not as many. Nice you went for HTML Strict too. It'll keep your code down.



You're welcome. Another person won for the validator and a Strict doctype is my reward.