*{margin:0px;padding:0px} body{font-family:arial} ul{list-style:none;width:100%} li{padding:4px;margin-bottom:5px; margin-top:5px; background-color:#ffffcc;text-align:center;color:#000; width:} #head { min-height:30px; background-color:#006699; border-bottom:2px solid #333; padding:20px; clear:both } #footer { min-height:10px; background-color:#dedede; border-top:2px solid #333; padding:20px; clear:both; text-align:center } #nav{ border-bottom:2px solid #333; } #main { padding:10px 10px 10px 10px; } #article,#sidebar{background-color:#dedede; min-height:250px;margin-bottom:20px;overflow:auto} .content{padding:20px} .clearfix{ clear:both; } @media only screen and (min-width: 480px) { #header { background-color:#cc0000; } ul{float:left;} li{float:left;width:16%;padding:4px;margin-right:8px} #main { padding:10px 20px 10px 20px; } } @media only screen and (min-width: 768px){ #header { background-color:#006699; } #article { float:left; width:68%; } #sidebar { float:right; width:30%; } #logo { float:left; width:10%; } #nav { width:100%; } ul{float:right} li{float:left;width:18%;padding:4px;margin-right:8px} #main { padding:20px 30px 20px 30px; } }
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Responsive Design with CSS</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <script src="modernizr-2.6.1-respond-1.1.0.min.js"></script> </head> <body> <div id="head"> </div> <div id="nav"> <ul> </ul> <div class="clearfix"></div> </div> <div id="main"> <div id='article'> <div class='content'> <h1>Responsive Design with CSS</h1> <h3>Resize your browser and test with different resolutions</h3> </div> </div> <div id='sidebar'> <div class='content'> Side Block </div> </div> </div> <div id="footer"> ffxggfgfgfgfg </div> </body> </html>