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 property is not having any effect on your markup in internet explorer, the solution is quite simple, yet baffling.

It seems like Internet Explorer only honors the max-width property if the width of an element 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 layout in Safari.

Another alternative is to target IE only for the width property.

In the code below, I am gonna target IE 10 and above to apply the width property 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 target other versions 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...