preface

Three column layout I believe we have seen, like the above Taobao, Douban and many other platform interface are used. They used the Grail layout and the twin wing layout. The Holy Grail layout and the Flying Wing layout are some of the big companies may ask the question, the Holy Grail layout and the flying wing layout are targeted at the three column left and right column fixed middle bar border adaptive web layout (imagine the Holy Grail is the main body is plus two ears; Bird is a body with a pair of wings), the Holy Grail layout is a layout model concept proposed by Kevin Cornell in 2006. It was first improved and spread in China by the engineer of TAOBAO UED (legend is Yu Bo), and it is also called the double flying wing layout in China. Before we talk about these two layouts, let’s also think about what else can we do with a three-column layout?

Float implements a three-column layout

First, we must define three divs, left, middle, and right.

  <div id="left">
    left
  </div
  ><div id="right">
    right
  </div>
  <div id="middle">
    middle
  </div>

Copy the code

Then float left and right out of the document flow, one to the left and one to the right, define a background color for each box for easy observation, and define height and width for left and right.

#left.#right{
  width: 200px;
  height: 200px;
  background: red;
}
#middle{
  height: 200px;
  background: green;
}
#left{
  float: left;
}
#right{
  float: right;
}
Copy the code

That’s when you see right fall downWhy is that? Because we didn’t give middle the width, it takes up the entire row by default, so it’s already full and right can’t float up. So what should we do? We can solve this problem simply by changing the HTML.

<div id="left">
    left
  </div
  ><div id="right">
    right
  </div>
  <div id="middle">
    middle
  </div>
Copy the code

Although float implements a three-column layout, it has major drawbacks:

  • We need to know that float is essentially a text wrap around the image, so we write some text inside the body that will squeeze out the unfloated middle. The problem is obvious.

  • So this is not recommended

Position Implements a three-column layout

Similar to a float layout, but with positioning

  • The left and right columns are absolutely positioned and of fixed width;
  • The middle element is self-adaptive, and the left and right margin is set to the width of the left and right elements;
* {margin: 0;
  padding: 0;
}
body{
  width: 100%;
  height: 500px;
}

#left.#right{
  width: 200px;
  height: 100%;
  background: pink;
}
#left{
  position: absolute;
  left: 0;
  top: 0;
}
#right{
  position: absolute;
  right: 0;
  top: 0;
}
#middle{
 margin: 0 200px;
}
Copy the code

  • Disadvantages of positioning: When the scrollbar is present, the content area is displayed behind the scrollbar, and the content area is still compressed (Not recommended)

The holy grail layout

Holy Grail layout: The middle box in the three-column layout automatically ADAPTS to the width of the page, while the width of the two boxes stays the same.

 <div class="wrap">
    <div id="header">header</div>
    <div id="content">

      <div id="middle">
        <p>middle</p>
        <p>middle</p>
        <p>middle</p>
      </div>

      <div id="left">left</div>
      <div id="right">right</div>
    </div>
    <div id="footer">footer</div>
  </div>
Copy the code

Define header and footer styles so that they are fully aligned horizontally.

.wrap{
  min-width: 600px;
}
#header.#footer{
  height: 50px;
  width: 100%;
  background: grey;
}
Copy the code

Float all three columns in the middle, float all three columns in a row, height collapse, content float clear; Float with overflow: hidden; It will become a Block Format Context (BFC) area to do this (if you want to know, you can set the height of the content) and set some styles for the three columns so that we can observe them.

#content{
 overflow: hidden;
}
#left.#right{
  width: 200px;
  height: 200px;
  background: plum;
}
#middle{
  background: greenyellow;
  /* width: 100%; * /
  height: 200px;

}
Copy the code

Since the middle of us has to adapt itself, so we set the width of middle to 100% full; , and set a padding: 0 200px for the content; And then we see that the left and right are falling downIn fact, the left and right are next to the middle. The actual position of the left is in the red border. Since the padding and the with:100% of the middle occupy the entire position, they fall down.Now we just move left to the left of middle and right to the right of middle, so how do we do that? Margin-left: -100%; margin-left: -100%; It goes to the far left of the middle, position: relative; Relative positioning. left: -200px; So we’re done with the left part.Margin-left: -200px; margin-left: -200px; margin-left: -200px; Just take it out and put it back in the same way. Look at the end resultComplete CSS code:

* {margin: 0;
  padding: 0;
}
.wrap{
  min-width: 600px;
}
#header.#footer{
  height: 50px;
  width: 100%;
  background: grey;
}
#middle.#left.#right{
  float: left;

}
#content{
 overflow: hidden;
 padding: 0 200px;
}
#left.#right{
  width: 200px;
  height: 200px;
  background: plum;
}
#left{
  margin-left: -100%;
  position: relative;
  left: -200px;
}
#middle{
  background: greenyellow;
  width: 100%;
  height: 200px;

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

Twin wing layout

Without further ado, let’s go to HTML

  <div class="wrap">
    <div id="header">header</div>
    <div id="content">

      <div id="middle">
        <div class="middle-inner">
          middle
        </div>
      </div>

      <div id="left">left</div>
      <div id="right">right</div>
    </div>
    <div id="footer">footer</div>
  </div>
Copy the code

Careful friends may have noticed the difference. Middle used two boxes, and we’ll have our own way.

  • steps
  • Middle is the first part of the content, then left, reight;
  • Float the three in a row, height collapse, content float clear;
  • Middle width set to 100%, full;
  • Margin-left: -100%; margin-left: -100%; Margin-left :-200px; margin-left:-200px;

These steps are the same as the Grail layout. Note that positioning is not required when moving left and right.

When you do this you will notice that middle is missing because it is overwritten by leftThis is where we do the trick: we just set the middle-inner padding to 0 200px; The final result is cleverly solvedComplete CSS code

* {margin: 0;
  padding: 0;
}
.wrap{
  min-width: 600px;
}
#header.#footer{
  height: 50px;
  width: 100%;
  background: grey;
}

#left.#right{
  width: 200px;
  height: 200px;
  background: green;
}

#middle{
  width: 100%;
  background: blueviolet;
  height: 200px;
  float: left;
}
#content{
  overflow: hidden;
}
#left{
  float: left;
  margin-left: -100%;
}
#right{
  float: left;
  margin-left: -200px;
}
.middle-inner{
  padding: 0 200px;
}
Copy the code

conclusion

  • Holy Grail Layout (less HTML, more CSS)

Put the left, middle, and right elements in a large container. Make all three elements float. Give the large container a padding to leave space for the left and right elements. Move only left and right elements to achieve this (use relative positioning)

  • Double wing layout (less CSS and more HTML) first put the left, middle, and right elements in a large container (the three elements are the same as each other). Inside the middle is a box. Float and move the left and right edges (do not use “relative”), and give the middle element a padding to place the left and right edges.
  • In fact, the two-wing layout is not much different from the Holy Grail layout. The difference is that the two-wing covers a container for the middle block. By setting the margin property of the middle block inside the container, the content on both sides of the middle block is not blocked by the left and right blocks.

Please correct any mistakes. You are welcome to leave comments and learn from each other.