<!DOCTYPE html> <html lang="en"> <head> <title> CSS 3 Media Queries </title> <meta charset="UTF-8"> <style> .wrapper {overflow: auto;} #sidebar { float: none; width: auto; } #menuitem { margin: 0; padding: 0; text-align:center; } .menu { background: lightgray; border: 1px solid blueviolet; list-style-type: none; margin: 4px; padding: 2px; } @media screen and (min-width: 550px) { #sidebar {width: 200px; float: left;} #main {margin-left: 216px; margin-top: -25px;} } </style> </head> <body> <div class="wrapper"> <div id="sidebar"> <ul id="menuitem"> <li class="menu">Menu 1</li> <li class="menu">Menu 2</li> <li class="menu">Menu 3</li> <li class="menu">Menu 4</li> <li class="menu">Menu 5</li> </ul> </div> <div id="main"> <h1>Resize the browser window to see the effect!</h1> <p>This example shows a menu that will float to the left of the page if the viewport is 550 pixels wide or wider. If the viewport is less than 550 pixels, the menu will be on top of the content.</p> </div> </div> </body> </html>
