Редактор кода W3Schools - Tryit

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {overflow: auto;}

#main {margin-left: 4px;}

#leftsidebar {
  float: none;
  width: auto;
}

#menulist {
  margin: 0;
  padding: 0;
}

.menuitem {
  background: #CDF0F6;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  list-style-type: none;
  margin: 4px;
  padding: 2px;
}

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}
</style>
</head>
<body>

<div id="main">
    <h1>Измените размер окна браузера, чтобы увидеть эффект!</h1>
    <p>В этом примере показано меню, которое будет перемещаться слева от страницы, если область просмотра имеет ширину 480 пикселей или шире. Если размер области просмотра меньше 480 пикселей, меню будет поверх содержимого.</p>
  </div>
</div>

</body>
</html>

​x
 
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.wrapper {overflow: auto;}​#main {margin-left: 4px;}​#leftsidebar {  float: none;  width: auto;}​#menulist {  margin: 0;  padding: 0;}​.menuitem {  background: #CDF0F6;  border: 1px solid #d4d4d4;  border-radius: 4px;  list-style-type: none;  margin: 4px;  padding: 2px;}​@media screen and (min-width: 480px) {  #leftsidebar {width: 200px; float: left;}  #main {margin-left: 216px;}}</style></head><body>​<div class="wrapper">  <div id="leftsidebar">    <ul id="menulist">      <li class="menuitem">Menu-item 1</li>      <li class="menuitem">Menu-item 2</li>      <li class="menuitem">Menu-item 3</li>      <li class="menuitem">Menu-item 4</li>      <li class="menuitem">Menu-item 5</li>    </ul>  </div>​  <div id="main">    <h1>Измените размер окна браузера, чтобы увидеть эффект!</h1>    <p>В этом примере показано меню, которое будет перемещаться слева от страницы, если область просмотра имеет ширину 480 пикселей или шире. Если размер области просмотра меньше 480 пикселей, меню будет поверх содержимого.</p>  </div></div>​</body></html>                