Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

Making max width work in internet explorer

If you have ever had to pull your hair out over why the max-width prop­erty is not hav­ing any effect on your markup in inter­net explorer, the solu­tion is quite sim­ple, yet baffling.

It seems like Inter­net Explorer only hon­ors the max-width prop­erty if the width of an ele­ment is also set.

Here’s the first(but not the ideal) solution

.myclass {
  width: 100%;
  max-width: 500px;
}

Although this will work in IE, it will break your lay­out in Safari.

Another alter­na­tive is to tar­get IE only for the width property.

In the code below, I am gonna tar­get IE 10 and above to apply the width prop­erty so that other browsers can stay sane.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .myclass {
      width: 100%;
   }
}

.myclass {
  max-width: 500px;
}

If you want to tar­get other ver­sions of IE in your CSS, see this answer.

Hope this helps!

Ryan Sukale

Ryan is just a regular guy next door trying to manage his life and finances.

You may also like...