css various ways Flying wing

Grail layout, Flying wing renderings

From renderings Grail layout, Flying wing same effect is the same.
Grail layout, Flying wing is fixed to the left and right sides of the width, the width of the intermediate content adaptive, i.e. 100%

Holy Grail layout

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .clearfix:before,
    .clearfix:after{
        display: table;
        content: " ";
        clear: both;
    }
    .container{
        padding: 0 200px;
    }
    .header,
    .footer{
        height: 200px;
        font-size: 28px;
        background-color: #f3f3f3;
    }
    .left{
        position: relative;
        /* 2、将.left再次拉到最左边，否则.main的左侧会有200px的空白 */
        left: -200px;
        float: left;
        width: 200px;
        min-height: 300px;
        /* 1、将.left拉到最左边，原来.left是掉下去的 */
        margin-left: -100%;
        background-color: #f00;
    }
    .main{
        float: left;
        width: 100%;
        min-height: 300px;
        background-color: #c32228;
    }
    .right{
        position: relative;
        /* 2、将.right再次拉到最右边，否则.main的右侧会有200px的空白 */
        right: -200px;
        float: left;
        width: 200px;
        /*/1、将.right拉到最右边，原来.right是掉下去的 */
        margin-left: -200px;
        min-height: 300px;
        background-color: #f90;
    }
</style>

<div class="header">header</div>
<div class="container clearfix">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="footer">footer</div>    

Flying wing floating achieved

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .clearfix:before,
    .clearfix:after{
        display: table;
        content: " ";
        clear: both;
    }
    .header,
    .footer{
        height: 200px;
        font-size: 28px;
        background-color: #f3f3f3;
    }
    .left{
        float: left;
        width: 200px;
        min-height: 300px;
        /* 将.left拉到最左边，原来.left是掉下去的 */
        margin-left: -100%;
        background-color: #f00;
    }
    .main{
        float: left;
        width: 100%;
        min-height: 300px;
        /* .left、.right各占了200px，因此需要将其抵消掉 */
        padding: 0 200px;
        background-color: #c32228;
    }
    .right{
        float: left;
        width: 200px;
        /* 将.right拉到最右边，原来.right是掉下去的 */
        margin-left: -200px;
        min-height: 300px;
        background-color: #f90;
    }
    
</style>

<div class="header">header</div>
<div class="container clearfix">
    <div class="main">
        <div class="main-inner">main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="footer">footer</div>

table-cell implemented Flying wing (IE8 also compatible oh ~)

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .container{
        display: table;
    }
    .header,
    .footer{
        height: 200px;
        font-size: 28px;
        background-color: #f3f3f3;
    }
    .left,
    .right,
    .main{
        /* 外层容器使用table-cell布局，设置元素为table-cell布局后它们就能在一行显示了，display: table-cell;设置宽度无效，
因此他们的宽度由内容撑开。 */
        display: table-cell;            
    }
    .left-inner{
        width: 200px;
        min-height: 300px;
        background-color: #f00;
    }
    .main{
        width: 100%;            
    }
    .main-inner{
        min-height: 300px;
        background-color: #c32228;
    }
    .right-inner{
        width: 200px;
        min-height: 300px;
        background-color: #f90;
    }
</style>

<div class="header">header</div>
<div class="container clearfix">
    
    <div class="left">
        <div class="left-inner">left</div>
    </div>
    <div class="main">
        <div class="main-inner">main</div>
    </div>
    <div class="right">
        <div class="right-inner">right</div>
    </div>
</div>
<div class="footer">footer</div>    

Absolute positioning to achieve Flying wing

Use absolute positioning to achieve one small problem: the height of the parent container can only be determined by the height of .main

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .container{
        position: relative;
        padding: 0 200px;
    }
    .header,
    .footer{
        height: 200px;
        font-size: 28px;
        background-color: #f3f3f3;
    }
    .left{
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        min-height: 300px;
        background-color: #f00;
    }
    .main{
        min-height: 300px;
        background-color: #c32228;
    }
    .right{
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        min-height: 300px;
        background-color: #f90;
    }    
</style>

<div class="header">header</div>
<div class="container clearfix">
    <div class="left">left</div>
    <div class="main">mian</div>
    <div class="right">right</div>
</div>
<div class="footer">footer</div>

Flying wing achieved using flex (compatibility issues)

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .clearfix:before,
    .clearfix:after{
        display: table;
        content: " ";
        clear: both;
    }
    .container{
        display: flex;
    }
    .header,
    .footer{
        height: 200px;
        font-size: 28px;
        background-color: #f3f3f3;
    }
    .left{
        flex: 0 0 200px;
        width: 200px;
        min-height: 300px;
        background-color: #f00;
    }
    .main{
        flex: 1;
        width: 100%;
        min-height: 300px;
        background-color: #c32228;
    }
    .right{
        flex: 0 0 200px;
        width: 200px;
        min-height: 300px;
        background-color: #f90;
    }
</style>

<div class="header">header</div>
<div class="container clearfix">
    
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
</div>
<div class="footer">footer</div>