<div class="frame"> <div class="double-wing-container"> <div class="double-wing-middle"> <div class="double-wing-main"> Double wing main. </div> </div> <div class="double-wing-left"> Double wing left. </div> <div class="double-wing-right"> Double wing right </div> </div> <div class="grail-container"> <div class="grail-middle"> Grail main </div> <div class="grail-left"> Grail left </div> <div class="grail-right"> Grail right </div> </div> <div class="flex-container"> <div class="flex-middle"> Flex main </div> <div class="flex-left"> Flex left </div> <div class="flex-right"> Flex right </div> </div> <div class="absolute-container"> <div class="absolute-middle"> Absolute main </div> <div class="absolute-left"> Absolute left </div> <div class="absolute-right"> Absolute right </div> </div> <div class="table-cell-container"> <div class="table-cell-left"> Table cell left </div> <div class="table-cell-middle"> Table cell main </div> <div class="table-cell-right"> Table cell right </div> </div> </div>
.frame { width: 400px; padding: 0 10px; resize: horizontal; border: 1px solid black; overflow: auto; } .double-wing-container { overflow: hidden; } .double-wing-container>div { position: relative; float: left; height: 100%; } .double-wing-middle { width: 100%; } .double-wing-left { width: 200px; background-color: orange; margin-left: -100%; } .double-wing-right { width: 200px; background-color: red; margin-left: -200px; } .double-wing-main { height: 100%; margin: 0 200px; background-color: pink; overflow: hidden; } .grail-container { overflow: hidden; padding: 0 200px 0 200px; } .grail-container>div { position: relative; float: left; height: 100%; } .grail-middle { width: 100%; background-color: blue; } .grail-left { width: 200px; background-color: green; margin-left: -100%; left: -200px; } .grail-right { width: 200px; background-color: brown; margin-left: -200px; right: -200px; } .flex-container { display: flex; } .flex-container>div { height: 100%; } .flex-left { width: 200px; background-color: yellow; order: 1; flex-shrink: 0; } .flex-middle { width: 100%; background-color: gray; order: 2; } .flex-right { width: 200px; background-color: red; order: 3; flex-shrink: 0; } .absolute-container { position: relative; overflow: hidden; } .absolute-container>div { height: 100%; } .absolute-left { float: left; width: 200px; background-color: blue; } .absolute-middle { position: absolute; left: 200px; right: 200px; top: 0; bottom: 0; background-color: pink; } .absolute-right { float: right; width: 200px; background-color: brown; } .table-cell-container { position: relative; overflow: hidden; } .table-cell-container>div { height: 100%; display: table-cell; } .table-cell-left { width: 200px; min-width: 200px; background-color: red; } .table-cell-middle { margin: 0 200px; width: 100%; background-color: brown; } .table-cell-right { min-width: 200px; width: 200px; background-color: yellow; }