How to set fixed width web page sitting in centre of window for IE6x, Firefox, Safari and Chrome

Got a fixed width website and can’t get it to centrally align in the window in Internet Explorer? Or you can get it to centrally align in IE but not in any other browser? Fear not, it’s not your fault! Unfortunately, the correct way of centrally aligning content through CSS doesn’t actually work in IE:

#cim_page-wrapper {
width: 66em;
margin: 0 auto
}

The second command, margin: 0 auto, basically gives our containing element an automatic margin on the left and right, thereby positioning the containing element in the centre of the browser window.

IE however, will need slightly different commands to make this work:

body {
text-align: center
}
#cim_page-wrapper {
width: 66em;
margin: 0 auto;
text-align: left
}

This will then centrally align the container in IE too. To prevent the text from centrally aligning too, we insert text-align: left into the container div.

Advertisements

Diganta Kumar is an experienced Technical Program Manager with a passion for technology. He has architected and developed software for over a decade for a broad range of industries. Diganta is a founder of two online IT businesses. He likes to help, mentor, and manage software development teams to improve and produce great software. He currently works as a Principal Program Manager for Microsoft. Before joining Microsoft, he was with AWS for five years, where he managed large cross-functional programs on a global scale.

Posted in CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.