How do I Center a web page in a browser with CSS?
by Aza Allen
on
Mar 11, 2009 at 8:49:01 am
I find tutorials for every aspect of CSS, except for how to do something like keep my web page centered in the browser.
I started by choosing a one column fixed, header, and footer. But I want the width of it all to be same as my header (960px) when I change the container class to 960 wide, the page won't stay centered in the browsers. What do I need to do to keep my page centered in all Browsers?
also - is 960 a good width for most browsers - what is recommended, if not?
Thanks guys,
Aza
Make sure to check out my Heroes Fan Film at http://ruesterprod.blip.tv
Re: How do I Center a web page in a browser with CSS? by Fernando Mol on Mar 11, 2009 at 1:56:52 pm
I you used the template from Dreamweaver you shouldn't have any issues just changing the container width. Please post a link to your site to see if something else is causing you the problem.
About screen resolution, it will depend on your target audience. Commercial sites doesn't take risks and design their sites to be viewed in the smaller screen resolutions possible (today there are still some 800 x 600 pixels monitors out there). If your target audience is more techie then you can use bigger screen sizes. Check www.w3counter.com to view some general reports.
Remember to consider the screen resolution minus the scroll bars of the browser. About 30 pixels.
I think 960 pixels is OK if you are not targeting the 800x300 market. Users with bigger screen resolutions usually doesn't use their browsers full screen anyway.
Re: How do I Center a web page in a browser with CSS? by Aza Allen on Mar 11, 2009 at 11:52:18 pm
Well, the website is not live yet... building for someone else while I learn.
Anyhow, I opened a new blank CSS style (one column fixed header, footer) I went to the container rule in CSS panel and tried to change the width from the default (720px) to 960px, and when I previewed it, it was shoved to the left, how do I get it back in the center?
Make sure to check out my Heroes Fan Film at http://ruesterprod.blip.tv
Re: How do I Center a web page in a browser with CSS? by Dan Danner on Mar 12, 2009 at 1:03:07 am
I can help you. I had the same problem and EVERYWHERE I looked I couldn't get a straight answer. Ok so, when working with CSS (by the way I'm not a master, this is just what I've figured out & it works)
Basically you've got boxes within boxes, & the trick is to center the outer most box... the container box if you will. Everything else will be fine. I hate code but dealing with css means having to learn some.
All the div this & div that. Here's some code of a simple webpage with a 320x240 flash video in it that i made in photoshop, centered in dreamweaver:
div id="Table_01" <----THIS IS THE OUTER MOST BOX OR CONTAINER div id="flash_spot" <--- THIS IS THE CONTAINER FOR THE VIDEO heres where all the flash code goes blah blah.. filler
<---- THIS IS THE END OF THE VIDEO CONTAINER /div <--- THIS IS THE END OF THE OUTER MOST BOX
now i had to chop up the code abit so it will display with out any html reactions... look for the first div in between < and >
So just double click the css rule of the outer most box, in the "box" section under "margin" uncheck same for all and make left & right "auto".... then under the "position" section change the top drop down menu from "absolute" to "relative". That should do it. if it dosen't work then you didn't center the outer most box.
Now making a webpage just in dreamweaver no photoshop the concept is the same... but be aware... just cause you draw a new layer or "ap div" inside a larger div - doesn't mean its actually inside it... you have to check that god-forsaken code.
Re: How do I Center a web page in a browser with CSS? by Bianca Perilli on Jun 30, 2009 at 5:58:55 pm
THANK YOU X 1,000,000 for posting this!!!!!
The default setting for me was to have the page center but somehow I messed with the code late last night and offset every page accept my index page. I am by no means an expert (yet) at creating sites either so I was beating my head against the wall trying to figure it out!!! Thank you for your clear steps! You saved me time on my website and also in home repairs ;)
