

<!DOCTYPE html>
<head>
<title>@media query</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
 <style>
#nav, #footer, #side {background-color:#FFE08C;}
#nav{margin:0px 0px 10px 0px; padding:0px;}
#nav li{display:inline;}		
#side {min-height: 400px; width: 200px;  float: right;}
#contents {min-height: 400px; background: #E4F7BA;}
#footer {margin-top: 10px;}
 
@media screen and (max-width: 480px) 
{
#side { width: auto; float: none; min-height: 0;margin-bottom: 10px; }
#contents { width: auto; min-height: 200px;}
}
</style>
 

</head>

<body>

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Guest</a></li>
<li><a href="#">Noitce</a></li>
</ul>
<div id="side">오른쪽 사이드바</div>
<div id="contents">본문</div>
<div id="footer">footer</div>


</body>

</html>