Twin wings and grail layout

The literal meaning

  • In popular terms, it is a three-column layout with fixed width of left and right columns and adaptive middle part.

Two kinds of layout essence

Grail layout implementation

  1. Let’s start with left, middle and right
  2. Give them three Settings float: left, out of the document flow;
  3. Be sure to set the container to overflow: Hidden; Can form A BFC split document
  4. Left and right set their widths
  5. Middle set width: 100%;
  6. Set position: relative for left, middle, and right;
  7. Container Setting padding: 0, rightWidth, 0, leftWidth;
  8. Margin-left: -100% for the left element and left: -leftwidth for the left element.
  9. Margin-left: -rightwidth for the right element, and left: rightWidth or right: -rightwidth for the right element.

The double flying wing layout is realized

  1. First put left, middle, and right inside middle
  2. Give them three Settings float: left, out of the document flow;
  3. Be sure to set the container to overflow: Hidden; Can form A BFC split document
  4. Left and right set their widths
  5. Middle set width: 100%;
  6. Inner set margin: 0, rightWidth, 0, leftWidth;
  7. Margin-left: -100%, right: -rightwidth;