What is the Holy Grail layout

Three-column layout structure, left column and right column width fixed, middle column width automatically filled, will change with the width of the parent element.

As is shown in

  • The width of header and footer fills the entire screen
  • When you zoom out or enlarge the screen, the width of the left and right columns stays the same, and the width in the middle becomes smaller or larger

Now, let’s do this

Dom structure

<header id="header">header</header>
    <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>
<footer id="footer">footer</footer>
Copy the code

Resolution:

  • Header and footer are two HTML5 semantic tags. Semantic tags are good for SEO
  • The center block is placed in front of the left block to make the center block load faster (DOM loading is sequential).
  • Center, left, and right use the same class name because they have some common CSS styles

CSS styles

The first step

Set the header and footer to be 100% wide, the left column to be 200px wide, the right column to be 300px wide, and the middle column to be 100% wide (because it varies depending on the browser width).

body { width: 100%; margin: 0; // Remove the browser default margin width}#header,
#footer {
    width: 100%;
    background-color: #ccc;
}

#container {
    width: 100%;
    background-color: yellow;
}

#container .column {
    height: 200px;
}

#left {
    width: 200px;
    background-color: green;
}

#center {
    width: 100%;
    background-color: blue;
}

#right {
    width: 300px;
    background-color: red;
}

Copy the code

The implementation is shown below

The second step

Now you want the left, right, and center blocks to line up horizontally, so float them. Add CSS style #container. Column {float: left; }

There are three ways to clear the float,

1. Set the contaniner height;

2. Add clear:both to the footer style to remove the influence of other elements.

3. Clear floats with pseudo-elements

#container:after {
    display: block;
    content: ' ';
    width: 100%;
    height:0;
    clear: both;
}
Copy the code

Implementation is shown in figure

The third step

Set the padding-left of the container to equal the width of the left block, and the padding-right to style the width of the right block

#container {
    padding-left: 200px;
    padding-right: 300px;
    box-sizing: border-box;
}
Copy the code

There are two types of box models, w3c standard box mode and IE weird box mode. The difference is whether the padding and border count in the width and height of the box. The browser’s default box model is content-box, so the padding and border are not included in width, because the width of our container is 100%. If it’s content-box, The width of the container is larger than the width of the browser, so you can see the scroll bar at the bottom of the browser, so box-sizing: border-box, let the padding count in width.

Implementation is shown in figure

The fourth step

To move the left block to the left of the center block and the right block to the right of the center block, the center block, the left block, and the right block should be on the same horizontal line, Because the container is not wide enough (the width of the center block is equal to the width of the Container) to fit three blocks at the horizontal line, the left and right blocks are squeezed down

So we add the left block style margin-left: -100%;

The margin distance of the box is calculated in the corresponding direction of the box, and a negative value means that the box moves in the opposite direction. For example, marin-left is the left side of the box and margin-right is the right side of the box

In this case, it is the width of the container. Since the width of the center block is the same as the width of the Container block, the left block overlaps the center block. The left block is placed above the center block (if z-index is not set, z-index should also be used in conjunction with position to unify the elements of the hierarchy. If there is overlap, the following element will cover the preceding element).

The left block should be moved 200px further to the left.

#left {
    position: relative;
    right: 200px;
}
Copy the code

The relative object follows the normal document flow and can be shifted in the normal document flow according to the attributes top, right, bottom, left, etc. The distance to the right is calculated from the left position of the left block.

Margin-right: -300px; margin-right: -300px; margin-right: -300px; margin-right: -300px; } move the right block 300px to the left (just over the padding-right position of the container)

The entire CSS code is as follows:

body {
    width: 100%;
    margin: 0;
}

#header,
#footer {
    width: 100%;
    background-color: #ccc;
}

#container {
    width: 100%;
    padding-left: 200px;
    padding-right: 300px;
    box-sizing: border-box;
    background-color: yellow;
}

#container:after {
    display: block;
    content: ' ';
    width: 100%;
    height:0;
    clear: both;
}

#container .column {
    height: 200px;
    float: left;
}

#left {
    width: 200px;
    background-color: green;
    margin-left: -100%;
    position: relative;
    right: 200px;
}

#center {
    width: 100%;
    background-color: blue;
}

#right {
    width: 300px;
    background-color: red;
    margin-right: -300px;
}

Copy the code

Pay attention to

If you reduce the width of the browser to a certain extent, the layout of the page will be distorted. This is because the width of the left and right columns, along with the margin and container padding values, are written out, and will be distorted when the browser is not wide enough to accommodate them. Because we should write pages in a responsive layout, that is, no matter how the width of the browser changes, we will still display a perfect page. Of course, there is a minimum width requirement (PC depends on the specific requirements, mobile is usually 320px).

Ps: this is my first time to write a document, if there is any mistake in the place, please kindly correct, thank you!!