IE Fix – Centering Layout [Common Bug in IE]

We use the “margin:0 auto;” for centering layout which works in Firefox and Chrome well. But when it comes to IE, it shows the entire layout at left.

Display in Firefox and Chrome:

Display in Internet Explorer :

Click on “Read More” to continue…

Code :

#container
{
background:blue;
color:white;
height:400px;
margin:0 auto;
width:400px;
}
#element_to_be_center
{
background:green;
color:white;
height:300px;
margin:50px auto;
width:300px;
}

Bug Fixed code :

#container
{
background:blue;
color:white;
height:400px;
margin:0 auto;
width:400px;
text-align:center;
}
#element_to_be_center
{
background:green;
color:white;
height:300px;
margin:50px auto;
width:300px;
text-align:left;
}

————————————–

– Nikhil Ughade
– Web Designer
Pune

Advertisements

About Nikhil
Name : Nikhil Ughade UI Developer, Accidentally in design field, no turn back since then. Location : Pune (MH, INDIA) From : Amravati (MH,INDIA) College : VYWS's College Of Engg. Badnera, Amravati Hobby : Social Networking, Designing Web Sites, Photography, Reading Books. In Free time works for NGO.

2 Responses to IE Fix – Centering Layout [Common Bug in IE]

  1. Pingback: CSS Tips

Leave a Reply

Please log in using one of these methods to post your comment:

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

%d bloggers like this: