css3 layout - the Holy Grail layout

Grail layout he Flying wing section are fixed on both sides of the intermediate solution adaptive three-column layout

After the layout order Grail intermediate div content is not covered something else, are provided intermediate div padding left and right with the left and right two div relative layout position: relative and add to the right and left properties div sides, so that the left and right after the two-column div content does not cover mobile middle div.

Layout features Grail (adaptive intermediate fixed ends), that is to say the contents will not change across the width of the browser to change its contents

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        html,body{
            min-width: 500px;
        }
        #container{
            padding-left: 200px;
            padding-right: 150px;
            height: 200px;
        }
        #container .column{
            float: left;
        }
        #center{
            width: 100%;
            background: red;
        }
        #left{
            width: 200px;
            margin-left: -100%;
            position: relative;
            background: blue;
            left: -200px;
        }
        #right{
            width: 150px;
            margin-left: -150px;
            position: relative;
            right: -150px;
            background: orange;
        }
        #footer{
            clear: both;
        }
    </style>
    <body>
        <div id="header"></div>
        <div id="container"> 
            < Div ID = "Center" class = "column" > intermediate middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle </ div > 
            < div the above mentioned id = "left" class = "column" > zoco zoco zoco zoco zoco zoco zoco zoco zoco zoco zoco zoco zoco zoco zoco zoco zoco zoco zoco left Zuozuo Zuozuo Zuozuo Zuozuo Zuozuo Zuozuo Zuozuo Zuozuo Zuozuo Zuozuo Zuozuo Zuozuo Zuozuo Zuozuo Zuozuo </ div > 
            < div ID = "right" class = "column" > Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right </ div > 
        </ div > 
        <div id="footer"></div>
    </body>
</html>

By implementing this code can be found with the narrow browser, only the middle of the text will change, both ends will not, this is the three-column layout common in the Holy Grail layout.

Grail layout: my understanding that, div ends but as limiting the size of the cup, and the middle div can be seen as a certain volume of water, when the cup reduced, the volume of water which is fixed, Therefore, the water level will follow increased or decreased

css3 layout - the Holy Grail layout

Guess you like