#wrapper{ height: 100%; width: 100%; position: absolute; } #sidebar { float: left; width: 30%; height: calc(100% - 40px); padding-left: 15px; padding-right: 15px; padding-top: 15px; } #cesiumContainer { float: left; left: 30%; border: none; width: 70%; height: calc(100% - 40px); } #statusBar { float: left; width: 100%; height: 40px; background-color: #f5f5f5; } #statusBarMessage { width: calc(70% - 70px); height: 100%; margin-left: 30%; float: left; padding-left: 40px; line-height: 40px; overflow: hidden; } #statusBarLoader { margin-left: 20px; margin-right: 20px; margin-top: 4px; float: left; } .loader { border: 4px solid #cccccc; /* Light grey */ border-top: 4px solid #3498db; /* Blue */ border-radius: 50%; width: 30px; height: 30px; animation: spin 2s linear infinite; display: none; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #logPanel{ height:400px; overflow-y:scroll; }