how to center a 'box' using css?

[Midget]

I am currently working on a website, but I have come across a problem -- so that is why I now ask you for help.

My problem is this:
View this website[2] in a lower/higher resolution that what you usually use. You will see that the box-thingy (with all the content in it) will keep itself centered at all times. There will always be an equal dose of nothingness (read: gray background) on each of the sides.

Now, view my website[1] and do the same thing. Notice the problem? I want mine to be centered aswell, but that doesn't happen at all. From what I have seen, putting margin: 0 and padding: 0 under body in the .css-file should do the trick, but it seems like something else in my .css[3] is overriding it.

And btw, for now -- my site will only work with Firefox (yes, I know it looks like hell in IE/Opera, thankyouverymuch).

So, if any of you know of a solution to my problem, please tell me :)

[3] http://temp.nerdinne.net/web/styles.css
[2] http://www.senilix.net
[1] http://temp.nerdinne.net/web/nerdinne.xhtml

[degsy]

Hi,

These examples will show you how to center a page
http://glish.com/css/7.asp

You need to have margines either side to keep the box centered.

These can be in Percentages or Pixels.


I will take a longer look at the code later.
If you can get back before then. What is the CSS that you are currently using to position the center box?

[Midget]

I read the example you gave me -- but I have tried this before. The page centered, but it also stayed in the same position regardless of my resolution.

I use three DIVs for centering the box-thingy:
#going-to-hell
#container-outer
#container-inner

I know I have lots of useless margin, padding, whatever in my code, but please don't comment on that :p

Thanks for helping, though :)

[rockboy]

Hi Midget, welcome to CTH. :wave:

You've specified the page div width as 960px.

Your sidebar div has: margin-left: 529px; width: 250px;
This makes the content div a minimum of 779px wide even though you have specified it in the content div itself as 97%. Add in the padding and margins and it's going to be too wide for lower resolutions to view it centered even though it might actually be centered.

The page that degsy linked to has some really great layouts you could adapt. I have used several of them. The one with the 3 columns he linked to has static side divs and a variable width center div to accomodate various resolutions. The site has other examples you could look at. The main css layout page is actually similar to what you are trying to create.

http://glish.com/css/

[Midget]

Thanks. I will take a look at that later on today :)

---

Edit: I added this to styles.css:
#content {
margin-right: 10%;
margin-left: 10%;
min-width: 500px;
}

Well, it looks centered in my resolution, though it looks the same as before in 800x600.

[Ned Seagoon]

Hi Midget

I have a page with similar layout to yours that stays centred regardless of the screen resolution. The code is nowhere near as complex as yours, following is the relevant bit:-
<div align="center">
<table border="0" width="476" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" width="476">
Hope that helped. BF

[Midget]

You have used tables for this. That's not something I want to do.
Thanks for trying, though :)