Overall centering of moodle site in browser.

Overall centering of moodle site in browser.

Keith Granger གིས-
Number of replies: 1
Sorry for such a newbie question. I have a fixed width moodle site 780 pixels wide, and I want to have it all centered in the browser with an alternate color background to have it stand out. I have been editing the css files to do lots of things but not this. Any pointers.

Thanks in advance
དཔྱ་སྙོམས་ཀྱི་སྐུགས་ཚུ།: -
In reply to Keith Granger

Re: Overall centering of moodle site in browser.

David Scotson གིས-

Assuming you're setting the width of #page try this:

#page {
    border: thick solid red;
    width: 780px;
    margin: 0 auto;
}

The border is just so you can see what is happening as you try things out. The width is necessary (though it can be e.g. 90% or 40em) and the margin's are 'automatically' set to be exactly half of what is left over, half on the left, half on the right.

I don't have a Windows PC handy to try this, I know this is one thing that Internet Explorer can be picky about. But try this first before getting fancy.

edit: the ever useful simplebits provides CSS centering 101 which includes the hacky workaround that makes it work with IE version 5.