The Holy Grail and Double Flying Wings layout

The Holy Grail Layout

The Holy Grail layout is a classic three-column layout approach where the left and right columns have fixed widths, and the middle column has an adaptive width. This layout was first introduced in an article in 2006 and was named for its elegant implementation.

Basic Structure

The HTML structure of the Holy Grail layout typically looks like this:

<div class="container">
  <div class="main">Main Content</div>
  <div class="left">Left Sidebar</div>
  <div class="right">Right Sidebar</div>
</div>

Implementation Principle

The core of the Holy Grail layout lies in the use of negative margins and relative positioning:

.container {
  padding: 0 200px; /* Left and right padding equal to the width of the side columns */
}

.main {
  width: 100%;
  float: left;
}

.left {
  width: 200px;
  float: left;
  margin-left: -100%; /* Pull the left column to the far left */
  position: relative;
  left: -200px; /* Then move it left by its own width */
}

.right {
  width: 200px;
  float: left;
  margin-left: -200px; /* Pull the right column to the far right */
  position: relative;
  right: -200px; /* Then move it right by its own width */
}

Practical Application Example

Suppose we need to implement a blog page layout:

<div class="blog-container">
  <div class="blog-content">
    <article>Here is the blog post content...</article>
  </div>
  <div class="blog-nav">Navigation Menu</div>
  <div class="blog-sidebar">Sidebar</div>
</div>

Corresponding CSS:

.blog-container {
  padding: 0 250px 0 180px;
  min-width: 600px;
}

.blog-content {
  width: 100%;
  float: left;
  background: #fff;
  padding: 20px;
}

.blog-nav {
  width: 180px;
  float: left;
  margin-left: -100%;
  position: relative;
  left: -180px;
  background: #f5f5f5;
}

.blog-sidebar {
  width: 250px;
  float: left;
  margin-left: -250px;
  position: relative;
  right: -250px;
  background: #eee;
}

The Double Flying Wings Layout

The Double Flying Wings layout is an improvement on the Holy Grail layout, proposed by the Taobao UED team. It addresses display issues in certain scenarios and offers a more stable implementation.

Basic Structure

The HTML structure of the Double Flying Wings layout is slightly different:

<div class="container">
  <div class="main-wrap">
    <div class="main">Main Content</div>
  </div>
  <div class="left">Left Sidebar</div>
  <div class="right">Right Sidebar</div>
</div>

Implementation Principle

The Double Flying Wings layout achieves its effect by adding an additional wrapper element:

.container {
  min-width: 600px; /* Prevent layout collapse when content is too narrow */
}

.main-wrap {
  width: 100%;
  float: left;
}

.main {
  margin: 0 200px; /* Left and right margins equal to the width of the side columns */
}

.left {
  width: 200px;
  float: left;
  margin-left: -100%;
}

.right {
  width: 200px;
  float: left;
  margin-left: -200px;
}

Practical Application Example

E-commerce product listing page layout:

<div class="product-container">
  <div class="product-main-wrap">
    <div class="product-main">
      <!-- Product list -->
    </div>
  </div>
  <div class="product-filter">Filters</div>
  <div class="product-recommend">Recommended Products</div>
</div>

Corresponding CSS:

.product-container {
  overflow: hidden;
  min-width: 800px;
}

.product-main-wrap {
  width: 100%;
  float: left;
}

.product-main {
  margin: 0 300px 0 250px;
  background: #fff;
  padding: 20px;
}

.product-filter {
  width: 250px;
  float: left;
  margin-left: -100%;
  background: #f8f8f8;
}

.product-recommend {
  width: 300px;
  float: left;
  margin-left: -300px;
  background: #f0f0f0;
}

Comparison of the Two Layouts

Structural Differences

Holy Grail Layout:

• All three columns are within the same container
• Uses padding to reserve space for side columns
• Requires relative positioning for adjustment

Double Flying Wings Layout:

• Middle column has an additional wrapper
• Uses margins to reserve space for side columns
• Does not require relative positioning

Pros and Cons Comparison

Holy Grail Layout Advantages:

• Cleaner HTML structure
• No additional wrapper elements needed

Holy Grail Layout Disadvantages:

• Layout may break when browser window is too narrow
• More complex implementation

Double Flying Wings Layout Advantages:

• More stable implementation
• Less prone to layout issues
• Better compatibility with older browsers

Double Flying Wings Layout Disadvantages:

• Slightly more complex HTML structure
• Requires an additional DOM element

Responsive Handling

Modern web design requires responsive layouts. We can optimize these traditional layouts with media queries:

/* Default Double Flying Wings layout */
.container {
  overflow: hidden;
}

.main-wrap {
  width: 100%;
  float: left;
}

.main {
  margin: 0 200px;
}

.left {
  width: 200px;
  float: left;
  margin-left: -100%;
}

.right {
  width: 200px;
  float: left;
  margin-left: -200px;
}

/* Medium screens: Right column moves down */
@media (max-width: 900px) {
  .main {
    margin-right: 0;
  }
  
  .right {
    float: none;
    width: auto;
    margin-left: 0;
    clear: both;
  }
}

/* Small screens: Three columns stack vertically */
@media (max-width: 600px) {
  .main {
    margin: 0;
  }
  
  .left,
  .right {
    float: none;
    width: auto;
    margin-left: 0;
  }
}

Modern CSS Implementation

With the development of CSS3, there are now more ways to implement similar layouts:

Flexbox Implementation

.container {
  display: flex;
}

.main {
  flex: 1;
  order: 2;
  padding: 0 20px;
}

.left {
  width: 200px;
  order: 1;
}

.right {
  width: 250px;
  order: 3;
}

Grid Layout Implementation

.container {
  display: grid;
  grid-template-columns: 200px 1fr 250px;
  grid-template-areas: "left main right";
}

.left {
  grid-area: left;
}

.main {
  grid-area: main;
}

.right {
  grid-area: right;
}

Browser Compatibility Considerations

While modern CSS solutions are simpler, browser support must be considered:

• Holy Grail/Double Flying Wings: Compatible with IE6+
• Flexbox: Partial support in IE10+, good support in IE11+
• Grid: Partial support in IE10-11 (old syntax), full support in modern browsers

For projects requiring support for older browsers, traditional Holy Grail/Double Flying Wings layouts remain reliable choices.

Variants in Real Projects

In actual development, we often need to adapt these classic layouts:

Fixed Header and Footer

<div class="app">
  <header>Header</header>
  <div class="container">
    <div class="main-wrap">
      <div class="main">Content</div>
    </div>
    <div class="left">Left</div>
    <div class="right">Right</div>
  </div>
  <footer>Footer</footer>
</div>

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header, footer {
  flex: 0 0 auto;
}

.container {
  flex: 1 0 auto;
  display: flex;
}

.main-wrap {
  flex: 1;
}

.left {
  width: 200px;
  order: -1;
}

.right {
  width: 250px;
}

Dynamic Sidebar

Implementing collapsible sidebars with JavaScript:

.left {
  width: 200px;
  transition: transform 0.3s ease;
}

.left.collapsed {
  transform: translateX(-180px);
}

.main-wrap.with-collapsed-left .main {
  margin-left: 20px;
}

document.querySelector('.toggle-left').addEventListener('click', function() {
  document.querySelector('.left').classList.toggle('collapsed');
  document.querySelector('.main-wrap').classList.toggle('with-collapsed-left');
});

Performance Optimization Suggestions

When using traditional float layouts, consider these performance issues:

1. Avoid excessive floating elements
2. Use best practices for clearing floats
3. Consider using the will-change property for rendering optimization
4. For complex layouts, evaluate whether modern layouts can be used instead

/* Optimized clearfix */
.container::after {
  content: "";
  display: table;
  clear: both;
}

/* Enable GPU acceleration */
.left, .right {
  will-change: transform;
}

Common Problem Solutions

Content Overflow Handling

When the middle column has excessive content, special handling may be needed:

.main {
  overflow: hidden; /* Create new BFC */
  min-height: 100vh;
  box-sizing: border-box;
}

Equal Height Columns Implementation

Traditional float layout method for equal height columns:

.container {
  overflow: hidden;
}

.main-wrap, .left, .right {
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

Simple solution using Flexbox:

.container {
  display: flex;
  align-items: stretch;
}

Border and Background Handling

Adding borders and backgrounds in float layouts requires attention:

.main {
  background: #fff;
  position: relative; /* Ensure z-index works */
  z-index: 1;
}

.left, .right {
  box-shadow: 0 0 0 1px #ddd; /* Alternative to borders to avoid layout issues */
}