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 has architected and developed software for more than a decade for a wide range of industries and development platforms and over the years has filled many roles including program manager, founder, developer, architect, team lead, mentor and project manager. Diganta is founder of two online IT businesses. He is a certified AWS Solutions Architect, certified Professional Scrum Master (PSM I), certified Professional Scrum Developer (PSD I) and ITIL Certified. He has presented at Microsoft Tech.Ed, Microsoft AppFest and Ark Group Intranet conference. He attends AWS Seattle Official Events, Seattle AWS Architects-Engineers, and AWS Cloud Commerce user groups. He likes to help, mentor and manage software development teams to improve and produce great software. He currently work as a Senior Technical Program Manager for Amazon Web Services.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s