body { margin: 0; } body > * { box-sizing: border-box; float: left; padding: 4px; } #main { position: absolute; top: 0; left: 192px; width: calc(100% - 192px); } #nav { width: 192px; background-color: #cccccc; position: fixed; top: 0; left: 0; } .nav-item { padding: 0px 4px 0px 4px; margin: 2px; background-color: #800000; color: #ddd; display: block; } .nav-item:hover { background-color: #ffffff; color: #800000; } .nav { width: 100%; } /* @media only screen and (min-width: 576px) { #nav { position: fixed; top: 0; left: 0; } #main { position: absolute; top: 0; left: 192px; } } */ @media only screen and (max-width: 576px) { #main, #nav { position: initial; width: 100%; } }