* { box-sizing: border-box; } body{ margin: 0; height: 100vh; } .main-column-left { padding: 1.7em 0em; float: left; width: 50%; background: red; overflow-y: scroll; height: 100vh; } .main-column-right { padding: 2em 1em; float: right; width: 50%; background: purple; overflow-y: scroll; height: 100vh; } .main:after { content: ""; display: table; clear: both; } div.nav-bottom ul, div.nav-top ul { list-style-type: none; margin: 0; padding: 0; } li a.nav-button { display: block; text-decoration: none; padding: 0.25em; font-family: sans-serif; float: left; width: 33.33%; } .nav-top { height: 1.5em; background: white; width: 100%; position: fixed; } .nav-bottom{ height: 1.5em; background: white; width: 100%; bottom: 0; position: fixed; z-index: 10000; } a.librarian-names, a.file-names { text-decoration: none; padding: 0.3em; color: black; } a.librarian-names:hover, a.file-names:hover { color: white; } #listofpeople{ border: lime 1px solid; position: fixed; width: 50%; padding: 0em; } .file-names-container { /* IE 9 */ -ms-transform: rotate(-90deg) translate(-78%, 0%); /* Safari */ -webkit-transform: rotate(-90deg) translate(-78%, 0%); /* Standard syntax */ transform: rotate(-90deg) translate(-0%, 0%); transform-origin: top left; border:blue 1px solid; height: 47em; width: 30em; overflow-y: scroll; overflow-x: hidden; position: absolute; left: 0%; top:100%; }