TAGS :Viewed: 11 - Published at: a few seconds ago

[ Improve IE compatibility for elastic layout ]

I have this elastic layout which works exactly as I want it in Chrome and any of the major browsers except for IE which ignores the @media query.

http://jsfiddle.net/U2W72/17/embedded/result/

* {margin: 0px; padding 0px'}

.thumb {
    float: left;
    width:16.8%;
    margin-left: 2%;
    margin-right: 2%;
    margin-bottom: 4%;
    background: pink;
    height: 200px;
}
.thumb:nth-child(5n) {
    margin-right: 0px;
}
.thumb:nth-child(5n+1) {
    margin-left: 0px;
}
@media (max-width: 1200px) {
    .thumb, .thumb:nth-child(1n) {
        width:22%;
        margin-left: 2%;
        margin-right: 2%;
        margin-bottom: 4%;
    }
    .thumb:nth-child(4n) {
        margin-right:0;
    }
    .thumb:nth-child(4n+1) {
        margin-left:0;
    }
}
@media (max-width: 600px) {
    .thumb, .thumb:nth-child(1n) {
        width:48%;
    }
    .thumb:nth-child(2n) {
        margin-right:0;
    }
    .thumb:nth-child(2n+1) {
        margin-left:0;
    }
}
@media (max-width: 400px) {
    .thumb, .thumb:nth-child(1n) {
        width:100%;
        margin-left: 0px;
        margin-right: 0px;
    }
}

Problem

Although I'm fine with the elastic aspect of it not working, it is the media query which tells it not to have a margin on the left and right items, and since IE doesn't read this, it does give it a margin, which makes it too wide and drops the 5th box off the end.

Question

How can I make the 5 column layout degrade gracefully for IE without dropping the 5th item down onto the next line.

Possible solutions

  • Write an IE only css rule which sets the box width in IE to 16% rather than 16.8%
  • Make the default layout 16% and then use @media to override the width to 16.8% for compatible browsers

I'm open to any thoughts or suggestions. Thank you!

Answer 1


Include meta tag in head..

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Answer 2


You have a syntax error in your CSS:

 * {margin: 0px; padding 0px'}

This is causing all your CSS rules to be ignored. You are closing the padding with a single quote, remove that.

enter image description here

Also I think if you used display:inline-block; you would find a nice fluid grid layout.