html, body { height: 100vh; width: 100vw; } body { overflow: hidden; background-color: slategrey; font-family: Arial, Helvetica, sans-serif; } .right { height: 100%; margin: 0; width: 75vw; float: right; background-color: navy; } .left { background-color: blueviolet; height: 100%; float: left; } span { color: lightgray; font-family: Arial, Helvetica, sans-serif; } .fullsize { height: 100%; margin: 0; } .buttons { display: flex; justify-content: space-between; } .main { height: 100vh; width: 100vw; position: absolute; top: 0; left: 0; } #cnvdiv { position: relative; height: 100%; width: 100%; /*display: flex;*/ /*text-align: center;*/ /*justify-content: center;*/ } .stack { position: relative; height: 100%; /*text-align: center;*/ /*float: right;*/ /*margin-right: 0;*/ /*margin-left: auto;*/ /*display: block;*/ } .stack>canvas { position: absolute; /*display: block;*/ /*display: inline;*/ left: 0; top: 0; } #submitdiv { /*position: relative;*/ width: 500px; } /*Things I've stolen from https://www.w3schools.com/howto/howto_js_autocomplete.asp*/ .autocomplete { /*the container must be positioned relative:*/ position: relative; display: inline-block; width: 300px; } input { border: 1px solid transparent; background-color: #f1f1f1; padding: 10px; font-size: 16px; } input[type="text"] { background-color: #f1f1f1; width: 100%; } input[type="submit"] { background-color: DodgerBlue; color: #fff; } .autocomplete-items { position: absolute; border: 1px solid #d4d4d4; border-bottom: none; border-top: none; z-index: 99; /*position the autocomplete items to be the same width as the container:*/ top: 100%; left: 0; right: 0; } .autocomplete-items div { padding: 10px; cursor: pointer; background-color: #fff; border-bottom: 1px solid #d4d4d4; } .autocomplete-items div:hover { /*when hovering an item:*/ background-color: #e9e9e9; } .autocomplete-active { /*when navigating through the items using the arrow keys:*/ background-color: DodgerBlue !important; color: #ffffff; }