Three-column layout mode to achieve the Holy Grail of

Three-column layout, also known as Flying wing

Three layout, the width of the intermediate adaptive, fixed width on both sides;
The middle column shows the priority to render in the browser;
The maximum height allowed any column;
Mainly margin-left = 100% may be utilized on a shift line ,, box-sizing = padding + margin + border + cotnent
In fact, left and right on the padding container ,, margin-left = 100% relative to the width of the parent class to move Shenma ,, ,, moved up will not understand

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>布局，圣杯模式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #header,#footer{
            background-color: green;
            text-align: center;
        }
        #container{
            /* width: 100%; */
            padding: 0 150px 0 200px;
            height: 500px;
            background-color:gold;
        }
        .column{
            float: left;
            height: 100%;
            position: relative;
        }
        #center{
            width: 100%;
            background-color: hotpink;
        }

        #right{
            left: 150px;
            width:150px;
            background-color: blue;
            margin-left: -150px;

        }
        #left{
            left: -200px;
            width:200px;
            background-color: royalblue;
            margin-left: -100%;

        }

    </style>

</head>

<body>
        <div id="header">header</div>
        <div id="container">
          <div id="center" class="column">center</div>
          <div id="left" class="column">left</div>
          <div id="right" class="column">right</div>
        </div>
        <div id="footer">footer</div>

</body>

</html>

　　Flying wing ,, manner two implementations

Removed leaving gaps positioning position, left right ,, and ,, intermediate padding value into the main container element neutron margin
A multi-purpose div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼</title>
    <style>
     
        *{
            margin: 0;
            padding: 0;
        }
        body{min-width: 700px;}
        #header,#footer{
            background-color: green;
            text-align: center;
        }
        #container{
            height: 500px;
            background-color:gold;
        }
        .column{
            float: left;
            height: 100%;
     
        }
        #center{
            width: 100%;
            background-color: hotpink;
        }

        #right{
         
            width:150px;
            background-color: blue;
            margin-left: -150px;

        }
        #left{
            /* left: -200px; */
            width:200px;
            background-color: royalblue;
            margin-left: -100%;

        }
        .sub{
            margin: 0 150px 0 200px;
        }

    </style>
</head>
<body>
        <div id="header">header</div>
        <div id="container">
          <div id="center" class="column"><div class="sub">center</div></div>
          <div id="left" class="column">left</div>
          <div id="right" class="column">right</div>
        </div>
        <div id="footer">footer</div>
</body>
</html>

　flex layout

　　　　Ruan Yifeng Flex Detailed examples of articles

　　　　Absolute positioning can be achieved,

<!DOCTYPE html>

<head>

<Title> layout, absolute positioning </ title>

<style>

* {

margin: 0;

padding: 0;

}

body{min-width: 700px;}

#header,#footer{

background-color: green;

text-align: center;

}

#container{

/* width: 100%; */

height: 500px;

background-color:gold;

position: relative;

}

.column{

position: absolute;

height: 100%;

top: 0;

}

#center{

margin:0 150px 0 200px;

/* width: 100%; */

background-color: hotpink;

height: 100%;

}

#right{

right: 0;

width:150px;

background-color: blue;

}

#left{

left: 0;

width:200px;

background-color: royalblue;

}

</style>

</head>

<body>

<div id="header">header</div>

<div id="center" class="">center</div>

<div id="right" class="column">right</div>

</div>

<div id="footer">footer</div>

</body>

</html>