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.

About Diganta Kumar

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.