Zeokat Zeokat - 4 months ago 68
CSS Question

max-width not working for IE 11

I´m very new designer and created my own WordPress theme and it works as expected on FireFox, Chrome and Opera. The problem arrives with InternetExplorer (i´m using Windows 7 with IE 11).

Seems that InternetExplorer 11 don't understand the max-width CSS. I have this CSS:

.vi-container {
margin: 0 auto;
position: relative;
width: 100%;

.vi-content {
margin: 0 auto;
max-width: 1200px;
overflow: hidden;

The HTMl code is something like:

<div class="vi-container">
<header class="vi-header">Header stuff</header>
<main class="vi-content" itemtype="http://schema.org/Blog" itemprop="mainContentOfPage" itemscope="" role="main">
<article class="post-content-wrap" itemtype="http://schema.org/BlogPosting" itemprop="blogPost" itemscope=""></article>
<!-- more articles with contents -->
<aside class="vi-sidebar" itemtype="http://schema.org/WPSideBar" itemscope="" role="complementary"></aside>

The max-width 1200px is totaly ignored by InternetExplorer. You can see it in live loading my webpage in IE and other browser to compare. For example: http://www.vozidea.com/limpia-la-base-de-datos-wordpress-con-wp-sweep

And here an example JSfiddle: http://jsfiddle.net/z4s01yxz/

I found other articles into StackOverflow about max-width issues on IE, but couldn't achieve a fix bymyself, that's why i´m requesting help. Hope that someone can give me a hand with this, thanks in advance.

The actual problem is that in InternetExplorer the webpage expands to fill all the width because max-width is ignored. You can check this image to see the difference: i.imgur.com/kGr8wk1.jpg

P.S: Sorry for my bad english.

Guy Guy

I think your problem is not coming from max-width but from main element...

The main element is not fully supported by IE11 (source).

2 solutions :