* { margin: 0; padding: 0; } body{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ecf0f5; font-size: 16px; font-family: 'Aller', Lato, Verdana; } /* Content Wrapper */ #WRAPPER { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #eee; overflow: hidden; } /* Page Header */ #HEADER{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: calc( 3.5em - 1px ); background: #fff; /* background: -webkit-linear-gradient(top right, #2428ff, #00E288); */ color: #fff; font-family: inherit; border-bottom: 1px solid #ddd; overflow: hidden; } /* Page Menu */ #MENU{ display: flex; position: absolute; top: 3.5em; left: 0; width: calc( 15em - 1px ); height: calc( 100% - 3.5em ); background-color: #fff; border-right: 1px solid #ddd; flex-direction: column; justify-content: flex-start; flex-wrap: nowrap; transition: width .2s ease-in-out; }