* { 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; } ul { list-style: none; } ul.name-elements li { padding: 1em; } li span.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; } span.librarian-names, span.file-names { text-decoration: none; padding: 0.3em; color: black; } span.librarian-names:hover, span.file-names:hover { color: white; cursor: pointer; } #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: 50vw; width: 30vw; overflow-y: scroll; overflow-x: hidden; position: absolute; left: 0%; top: calc(100% - 1.5em); } img.listed-images { width: 100%; } video.listed-videos { width: 100%; } audio.listed-audio { width: 100%; } embed.listed-pdf { width: 100%; } .clicked { color: blue !important; }