My elastic layout functions perfectly in Chrome and other major browsers, except for IE which seems to be ignoring 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;
}
}
Issue
Although I'm okay with the elastic feature not working in IE, the problem lies in the media query that sets the margins to 0 for left and right items, which IE is not picking up. This results in the layout becoming too wide and causing the 5th box to drop down to the next line.
Query
How can I create a fallback solution for IE to prevent the 5th item from dropping down to the next line while maintaining a 5 column layout?
Possible Solutions
- Create a CSS rule specifically for IE that sets the box width to 16% instead of 16.8%
- Set the default layout width to 16% and use @media to override it to 16.8% for compatible browsers
I am open to any ideas or suggestions. Thank you!