<!DOCTYPE html> <!-- saved from url=(0060)http://webdesignerwall.com/demo/responsive-design/index.html --> <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <!-- viewport meta to reset iPhone inital scale --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demo: Responsive Design in 3 Steps</title> <!-- css3-mediaqueries.js for IE8 or older --> <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <style type="text/css"> body { font: 1em/150% Arial, Helvetica, sans-serif; } a { color: #669; text-decoration: none; } a:hover { text-decoration: underline; } h1 { font: bold 36px/100% Arial, Helvetica, sans-serif; } /************************************************************************************ STRUCTURE *************************************************************************************/ #pagewrap { padding: 5px; width: 960px; margin: 20px auto; } #header { height: 180px; } #content { width: 600px; float: left; } #sidebar { width: 300px; float: right; } #footer { clear: both; } /************************************************************************************ MEDIA QUERIES *************************************************************************************/ /* for 980px or less */ @media screen and (max- 980px) { #pagewrap { width: 94%; } #content { width: 65%; } #sidebar { width: 30%; } } /* for 700px or less */ @media screen and (max- 700px) { #content { width: auto; float: none; } #sidebar { width: auto; float: none; } } /* for 480px or less */ @media screen and (max- 480px) { #header { height: auto; } h1 { font-size: 24px; } #sidebar { display: none; } } /* border & guideline (you can ignore these) */ #content { background: #f8f8f8; } #sidebar { background: #f0efef; } #header, #content, #sidebar { margin-bottom: 5px; } #pagewrap, #header, #content, #sidebar, #footer { border: solid 1px #ccc; } </style> </head> <body> <div id="pagewrap"> <div id="header"> <h1>Header</h1> <p>Tutorial by Web Designer Wall(read related article)</p> </div> <div id="content"> <h2>Content</h2> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div> <div id="sidebar"> <h3>Sidebar</h3> <p>text</p> <p>text</p> </div> <div id="footer"> <h4>Footer</h4> </div> </div> </body> </html>