csshtmlfirefoxgoogle-chromewidescreen

website not centered in firefox/chrome

i am having a problem with my website on Widescreens on Firefox/Chrome. It's not centred for some reason, margin: 0 auto; is not working either. The website looks fine on normal screens or even wide screens with lower res but on 1900x1200 the content is not centered for some reason. However the website looks fine on IE 9 at 1900x1200. Here is the code:

jsfiddle.net/hXskH/

Any clues?

Solution

  • For it to be centered you need to add a width along with that margin: 0 auto; Most common width is 960px; 

    #main {
padding-bottom: 300px;
margin:0 auto;
position: relative;
width: 960px;
}