CSS for Responsive Webdesign Templates

/* --------------------------------------------
Normal Website viewport
-------------------------------------------- */

#container {
width: 1200px;
margin: 0 auto;
padding: 20px 0;
text-align: left;
}
#content {
float: left;
width: 900px;
margin-right: 20px;
}
#sidebar {
float: left;
width: 280px;
}

/* --------------------------------------------
< 1200px viewport
-------------------------------------------- */

@media (max-width: 1200px) {
#container {
width: 960px;
}
#content {
width: 700px;
}
#sidebar {
width: 240px;
}
}

/* --------------------------------------------
iPad in landscape
-------------------------------------------- */

/*
TO PREVIEW ON THE DESKTOP, REPLACE THE QUERY WITH THE FOLLOW:
@media (max-width: 1024px) { }
*/

@media (max-device-width: 1024px) and (orientation: landscape) {
#container {
width: 768px;
}
#content {
width: 540px;
}
#sidebar {
width: 208px;
}
}

/* --------------------------------------------
iPad in portrait
-------------------------------------------- */

/*
TO PREVIEW ON THE DESKTOP, REPLACE THE QUERY WITH THE FOLLOW:
@media (max-width: 768px) { }
*/

@media (max-device-width: 1024px) and (orientation: portrait) {
#container {
width: 600px;
}
#content {
float: none;
width: 600px;
margin: 0 0 12px 0;
}
#sidebar {
float: none;
width: 600px;
}
}

/* --------------------------------------------
Mobile
-------------------------------------------- */

@media (max-width: 600px) {
#container, #content {
float: none;
width: inherit;
}
#content {
margin: 0;
}
#sidebar, #banner {
margin: 0;
}
}