How to center the entire contents of the window

summary:

want to float the content in the center of the browser window

How to center the entire contents of the window

Stephen Kay 1209156409|%e %b %Y, %H:%M %Z|agohover

If you look at this wiki here, you will see that I have fixed the width of the content, header etc. to be a constant fixed width.

Now, what I'd like to do is have the entire thing "float" in the center of the window if the browser window is stretched extremely wide (you need a large monitor to test this).

Try as I may, I cannot find any way to do this! I thought to use the body tag in the CSS, or the id #html-body, but align:center doesn't do anything and I can't find anything that does.

Anyone have any ideas on how to do this? Thanks…

Re: How to center the entire contents of the window

cold_blood3d 1209166676|%e %b %Y, %H:%M %Z|agohover

Put this in your custom CSS:

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

Re: How to center the entire contents of the window

hartnell 1209214081|%e %b %Y, %H:%M %Z|agohover

I'm curious, why did you use :

div#container

rather than just using the id selector :

#container

I'm asking because I may have missed something important when I learned CSS.

— Shawn

---

Here is a fine example of a wiki.

---

My Blog Sucks.

Re: How to center the entire contents of the window

Stephen Kay 1209264889|%e %b %Y, %H:%M %Z|agohover

Thanks for the reply. Actually, this did not work, but your answer prompted me to play around with the margin attribute a bit, and what does work is this:

/* limit the width of the entire page */
/* float it in the center of the window */
#container{
    max-width: 1080px;
    margin: auto;    
}

Note that part of the solution was to move the max-width attribute from my body tag to this tag here - together, the two of them create the desired effect.

Re: How to center the entire contents of the window

cold_blood3d 1209323088|%e %b %Y, %H:%M %Z|agohover

hartnell: I don't know that much about CSS or what's the right thing to use… I've seen it both ways though, and both ways work. Is the proper way without the "div"?

Stephen Kay: Love the look of your site—so much better centered! Note: You might be aware of this already, but IE6 does not support max-width, so it becomes a full screen liquid layout (doesn't look bad). You could use a fixed width though:

width: 1080px;

Also, you might want to make that top image a gif, since IE6 doesn't support transparent pngs. I guess it depends on your userbase and what browser they use.

Re: How to center the entire contents of the window

Stephen Kay 1209356696|%e %b %Y, %H:%M %Z|agohover

mmclean, thanks for the tip on IE 6, I hadn't got around to checking it in that yet, I'm still working on the overall theme. There were a bunch of things broken in IE 6, I just spent the better part of the day fixing them. I replaced the top graphic with a non-transparent one (more on that below). You can check it out here, I think I've got my theme basically finished at this point:

Karma-Lab Wiki

Now, about transparent pngs. This is a well-known problem with IE 6, and there are several solutions and hacks around. I myself have one installed on my main site, and it works great. But I cannot get it to work on wikidot.com for some reason. I have posted another thread about this at here, in case you are interested in that discussion.