Hi,

I can not figure out how to center a page in a browser window so that there is space around it.

I would like to figure out how to do this with CSS.

TIA

Richard S Albrecht

Richard S Albrecht

Hi Richard,
I will assume your page is built with fantastic XHTML and CSS and tables have not been used.

You want to apply a style to a container DIV that holds all of your content, if you dont have one simply wrape a div round your content and give the id - "container" and then use the following CSS:

#container { margin-left: auto; margin-right: auto; }

This should ensure your content is centered without having to use nasty code. Let me know if this works has sometime unseen factors effect the rendering of a box using this method.
Alan.

Hi Alan,

I have the same problem but I'm using Dreamweaver MX and Im new with it can you tell me step by step on how to do that in Dreamwaver MX or is there a settings.... Please...

Jun

<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
Hi Richard,
I will assume your page is built with fantastic XHTML and CSS and tables have not been used.

You want to apply a style to a container DIV that holds all of your content, if you dont have one simply wrape a div round your content and give the id - "container" and then use the following CSS:

#container { margin-left: auto; margin-right: auto; }

This should ensure your content is centered without having to use nasty code. Let me know if this works has sometime unseen factors effect the rendering of a box using this method.
Alan.
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>

<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
Hi Richard,
I will assume your page is built with fantastic XHTML and CSS and tables have not been used.

You want to apply a style to a container DIV that holds all of your content, if you dont have one simply wrape a div round your content and give the id - "container" and then use the following CSS:

#container { margin-left: auto; margin-right: auto; }

This should ensure your content is centered without having to use nasty code. Let me know if this works has sometime unseen factors effect the rendering of a box using this method.
Alan.
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>

if you use that approach you also need to set the body tag like so;

<pre id=code><font face=courier size=2 id=code>body {text-align: center;}</font id=code></pre id=code>

regards

Dave Thomas
<b>DMX Zone Forums Manager</b>

<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
Hi Richard,
I will assume your page is built with fantastic XHTML and CSS and tables have not been used.

You want to apply a style to a container DIV that holds all of your content, if you dont have one simply wrape a div round your content and give the id - "container" and then use the following CSS:

#container { margin-left: auto; margin-right: auto; }

This should ensure your content is centered without having to use nasty code. Let me know if this works has sometime unseen factors effect the rendering of a box using this method.
Alan.
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>

Can you tell me how to wrap a container DIV around content? Thanks!
Lauren

Can you tell me how to wrap a container DIV around content? Thanks!
Lauren

You will need to go into code view, then find the opening &lt;body&gt; tag.

Just after this tag put this:

&lt;div id="container"&gt;

Now go to the closing &lt;/body&gt; tag.

Just before this tag put this:

&lt;/div&gt;

(Obviously, you will need to put the CSS in a file or in the &lt;head&gt; area of the file)

And viola, you have your content in the container

Stefan - www.pash.biz

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
DMX | ASP | VBScript | ACCESS | SQL Server | IIS5
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

I tried the following and still no centering... I have ie6. Please help! Thanks.

body {
text-align: center;
}

#container {
margin-left: 0 auto; margin-right: 0 auto; text-align:left;
}

Code in body

&lt;div id="container"&gt;
&lt;div id="logo"&gt;&lt;img src="A_home/MSC logo_web.jpg" alt="logo" width="350" height="175" /&gt;&lt;/div&gt;
&lt;div id="brn"&gt;&lt;img src="A_home/2N887A~BRNhouse.jpg" alt="brn" width="273" height="205" /&gt;&lt;/div&gt;
&lt;div id="grn"&gt;&lt;img src="A_home/GRNhouse.jpg" alt="grn" width="273" height="193" /&gt;&lt;/div&gt;
&lt;div id="Layer3"&gt;&lt;img src="A_home/HOME.jpg" alt="HM" width="158" height="61" /&gt;&lt;img src="A_home/PRODUCTS.jpg" alt="PRODUCTS" width="158" height="50" /&gt;&lt;img src="A_home/SHOWCASE.jpg" alt="SHOWCASE" width="158" height="49" /&gt;&lt;img src="A_home/CONTACT.jpg" alt="CONTACT" width="158" height="50" /&gt;&lt;img src="A_home/NEWS.jpg" alt="NEWS" width="158" height="46" /&gt;&lt;img src="A_home/OTHER.jpg" alt="OTHER" width="158" height="70" /&gt;&lt;/div&gt;
&lt;/div&gt;

<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
You will need to go into code view, then find the opening &lt;body&gt; tag.

Just after this tag put this:

&lt;div id="container"&gt;

Now go to the closing &lt;/body&gt; tag.

Just before this tag put this:

&lt;/div&gt;

(Obviously, you will need to put the CSS in a file or in the &lt;head&gt; area of the file)

And viola, you have your content in the container

Stefan - www.pash.biz

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
DMX | ASP | VBScript | ACCESS | SQL Server | IIS5
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>

use

#container {
margin: auto;
text-align: left;
}

regards

Dave Thomas
<b>DMX Zone Forums Manager</b>
Tip: Use Google or our own Search function to find answers before asking. You'd be surprised what's already written <img src=../images/dmxzone/forum/icon_smile_wink.gif border=0 align=middle>

Still not working. I have a nav bar and some images inside layers that are absolute positioned (default when I created the layers and dropped images in). Do I need to tweak with positioning and widths, etc.? I tried this too - nothing is working.

<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
use

#container {
margin: auto;
text-align: left;
}

regards

Dave Thomas
<b>DMX Zone Forums Manager</b>
Tip: Use Google or our own Search function to find answers before asking. You'd be surprised what's already written <img src=../images/dmxzone/forum/icon_smile_wink.gif border=0 align=middle>

<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>

Add a width to the css code for the container

e.g. width: 750px;

Stefan - www.pash.biz

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
DMX | ASP | VBScript | ACCESS | SQL Server | IIS5
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Dave Thomas
DMX Zone Forums Manager

Aloha Mr. Thomas,

Thanks in part to your forum, we were able to get a CENTERPAGE HTML/CSS
format, but it does not work in all browsers. Perhaps you can help.

See.....

BYTEmeCITY.com/center

for a working example.... so far. The file is heavily commented also the
graphic, and all details are in a ZIP at:

BYTEmeCITY.com/center/CenterPage.zip

Please see if you can fix this file to work, so the whole world can have this
univeral solution we all would like from time to time. If not you, perhaps
one of your users. In any event, we are giving our work GNU so far, and
hope others will improve it.

Thanks,
John London

there is a worked example here, I put it together as a quick demo for one of my hosting customers;
this works in Firefox 1.5.0.9, IE7, Opera on PC

alanchard.com/guides/css_centre.htm