Centering a fixed-width container div in broswer window.

building_my_own_site · Joined: 19 Jan 2008 Posts: 7

I have a container div that is set to have a fixed width, and I would like this centered in the middle of the browser window.

I have been looking into using the "position: absolute" attribute of css. However, it appears to me that this will only allow me to set a fixed left/right/top/bottom position either in pixels (etc,etc) or percentage - with different sizes of browser windows , this would mean that the position would not be in the center.

I know there must be a way to do this as I have seen other sites like this, but looking at the attribute in IE Developer Toolbar, I cannot figure out how to do this.

Any help would be appreciated.

Many Thanks.

Straystudio · Joined: 14 Apr 2008 Posts: 255 Location: Nord Italy

ANCIENT SOLUTION (the best), a bare DIV upper container:

<div align="center">
Your fixed-width div container here
</div>

sticks464 · Joined: 31 Dec 2006 Posts: 1100

You can do it with the deprecated 'align="center' or you can use css

<div style="margin:0 auto">
content here
</div>

building_my_own_site · Joined: 19 Jan 2008 Posts: 7

Thanks guys.

There is always an easy way to do things!

One point that I have noticed for people attempting the same thing:

The "margin: 0px, auto" in css didn't seem to work in I.E.until i specified the document type in my html page.

I read up about this, and it is very useful as it forces browsers to interpret XHTML code as opposed to HTML - they are both very similar but XHTML just requires syntacticlly correct code. (w3schools for the tutorial if you need one!)

building_my_own_site · Joined: 19 Jan 2008 Posts: 7

Forgot to mention the DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">