CODEWITHSUNDEEP
csshtmlfirefoxgoogle-chromewidescreen
Sarah McLachlane
Sarah McLachlane

Reputation: 537

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?

Upvotes: 0

Views: 2976

Answers (2)

Kalpesh Patel
Kalpesh Patel

Reputation: 2822

You have not set width for #main, so as it is block level it has occupied full width ie 100%.

Set the width for element.

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

Upvotes: 0

Caelea
Caelea

Reputation: 2348

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;
}

Upvotes: 1

Related Questions