CSS Media Queries

by Piyush Baliyan

HTML

<div id="content">
    <div id="inner1" class="inner"></div>
    <div id="inner2" class="inner"></div>
    <div id="inner3" class="inner"></div>
</div>

CSS

body {
    margin:0px;
    padding:0px;
}
#content {
    background:blue;
    position:absolute;
    display:block;
    height:auto;
}
.inner {
    width:310px;
    height:200px;
    margin:5px 0px 0px 5px;
    background: orange;
    display:inline-block;
}
@media all and (min-width: 960px) {
    #content {
        width: 960px;
    }
}
@media all and (max-width: 959px) {
    #content {
        width: 640px;
    }
    #inner3 {
        width:630px;
    }
}