The holy grail layout

The Holy Grail layout and Two Wings layout are common front-end interview questions, because they show you both know HTML structure and HTML+CSS layout. In fact, the Holy Grail layout is the same thing as the twin-wing layout. They all achieve a three-column layout, with fixed width boxes on both sides and adaptive boxes in the middle, which is often referred to as the solid ratio solid layout. They achieve the same effect, the difference lies in the method of implementation.

First let’s have a look at the renderings

Step 1: Build the page structure

<div id="header"Head > < / div ><div id="container">
	<div id="center" class="column">The main content</div>
	<div id="left" class="column">Secondary content</div>
	<div id="right" class="column">The sidebar</div>
</div>
<div id="footer">The footer</div>
Copy the code

Step 2: Add a background and height for each container

	body{
	    min-width: 500px;
	    margin: 0;
	    padding: 0;
	    text-align: center;/* Text centered */
	}
	#container .column{
	    height: 500px;
	}
	#center{
	    background: #cecece;
	}
	#left{
	    background: red;
	}
	#right{
	    background: orange;
	}
	#header.#footer {
	    background: gray;
	    height: 50px;
	}
Copy the code

Step 3: Add widths for each container and inner margins for the container(main content)

	body{
            min-width: 550px;
            margin: 0;
            padding: 0;
            text-align: center;/* Text centered */
        }
        #container{
            padding-left: 300px;/* Left inner margin */
            padding-right: 200px;/* Right inner margin */
        }
        #container .column{
            height: 400px;
        }
        #center{
            background: #cecece;
            width: 100%;
        }
        #left{
            background: red;
            width: 300px;
        }
        #right{
            background: orange;
            width: 200px;
        }
        #header.#footer {
            background: gray;
            height: 50px;
        }
Copy the code

The renderings are as follows

Step 4: Float the three containers of the main content (out of the flow), and the footer will automatically move up below the header if the container above floats, so use the Clear property to clear it

	#container .column{
            height: 300px;
            float: left;
        }
        #footer{
            clear: both;
        }
Copy the code

The renderings are as follows

Step 5: LetSecondary content(Left) move to the left

Start by adding relative positioning to its container

	#container .column{
            height: 300px;
            position: relative;/* Relative positioning */
            float: left;
        }
Copy the code

Second, we make the outer negative margin of the secondary content (left) -100%(because the main content is 100% wide)

	#left{
            background: red;
            width: 300px;
            margin-left: -100%;
        }
Copy the code

The renderings are as follows

Move 300px to the right while using relative positioning

	#left{
            background: red;
            width: 300px;
            margin-left: -100%;
            right: 300px;
        }
Copy the code

The renderings are as follows

Step 6: Move the sidebar to the right for the same reason

	#right{
            background: orange;
            width: 200px;
            margin-right: -200px;
        }
Copy the code

The final effect is shown below

Note: if you have already got the skill, then you can use the browser development tool (F12) to test the effect, to see if the middle is adaptive, and the sides are fixed width