The holy grail refers to a web page layout which has multiple, equal height columns that are defined with style sheets. It is a widely accepted and implemented method that has been implemented with current technologies all have drawbacks. [1] Because of this, finding an optimal implementation has been likened to searching for the Holy Grail elusive .

The limitations of CSS and HTML, the desirability of semantically meaningful pages, and the deficiencies of various browsers, is a completely correct approach. As the underlying technologies do not provide a proper solution, web designers have found various ways to work around the limitations. Common workarounds include changes in page structure, the addition of graphics, scripting, and the creative use of CSS. These methods are imperfect, inconvenient, and may even be considered abuse of the web standards and their intent.

Upcoming web standards will be more elegant fashion. However, the problem will continue until these standards are finalized and adopted.

 

The problem

Many web pages require a layout with multiple (often three) columns, with the main page in one column (often the center), and supplementary content such as menus and advertisements in the other columns (sidebars). These columns are a must, and they should not be too big. A common requirement is that the sidebars have a fixed width, with the center column to size to fill the window (fluid or liquid layout). Another common requirement is that when it does not contain enough content to fill the screen, the footer should drop to the bottom of the window instead of leaving blank space underneath.

There are many obstacles to accomplishing this:

  • CSS , but quite useful for styling, currently has limited capabilities for page layout.
  • The height of the elements (such as div elements) is normally determined by their content. So two divisions, side by side, with different amounts of content, will have different heights unless their height is somehow set to an appropriate value.
  • HTML is meant to be used semantically ; HTML elements should be chosen which describe their content. The appearance of a page as rendered by the user should be determined independently by style rules. Many implementations misuse by using HTML tables for non-tabular data, or multiple nesting div Elements without semantic purpose. Non-semantic use of HTML confused users or user agents Who are try trying to discern the structure of the page content, and is an accessibility issue. [2]
  • As search engines Consider happy in the Beginning of a web page’s source code to be more relevant , web designers desire the Ability to spot the content in the page source in an arbitrary order, without Affecting the appearance of the page.
  • Because of incorrect rendering of content by different browsers, a method that works in a standard-compliant browser may not work properly.

Known workarounds

Tables

Before the widespread implementation of CSS, designers commonly used tables to lay out pages. Sometimes they achieve their desired layout by nesting several tables inside each other. Although placing the columns inside the table can easily achieve the desired visual appearance, using the table WAI-ARIA HTML attribute can be set to “presentation” to regain semantic context. There is also no way to check the order of the columns in the source page.

Divisions with display: table

It is possible to make equal height columns using the CSS display property. [3] This requires nested container that is set to “display: table” and “display: table-row”, and that is set to “display: table-cell”. This is semantically correct, only the display is affected. Internet Explorer 7, and the method also lacks the ability to control the source code.

Faux columns

This method uses a background image which provides the background colors and vertical borders of all three columns. [4] The content of each column is enclosed in a division, and its position is based on such techniques, negative margins, and relative positioning. The background is usually only a few pixels high, and is made to cover the page using the “repeat-y” attribute. This works fine for fixed-width layouts, and can be adapted for percentage-based variable-width pages, but can not be used for fluid center pages.

JavaScript

In this method, after the page is loaded, the measures of the height of each of the columns, and sets the height of each column to the greater value. This will not work in JavaScript , or have JavaScript disabled.

Fixed or absolute positioning

In this method, the corners of the column are locked in a specific place on the page. [5] This may be acceptable or even desired, but does not solve the problem. The consequences of this method can be used in the context of the content of the document.

Nested divisions

A division with its background will grow in height to contain its content. This behavior is used to solve the problem by creating three divisions. These divisions are placed in their proper location using positioning techniques, and the three content divisions are located on the back ground. The background divisions then become as tall as the tallest content division. The drawbacks of this method include the three non-semantic divisions, and the difficulty of positioning the elements of this complex layout. [6]

Border color

A simpler version of the nested division method entails using a single container division. The background of this division provides the right angle of the column, and the left and right borders, which are given widths to the side column widths, provide the background colors of the sidebars. The content of each column is over its background. This method still uses a non-semantic division, and makes it difficult to apply background images and borders to the sidebars. [7]

Bottom padding

By placing a large amount of padding on the bottom of the column container A corresponding negative margin will bring back to its proper position. Positioning is simple in this method, as the container of a column is also contained in its background. A padding value of 32767px is the largest that will be recognized by all modern browsers. If the difference in column heights is greater than this, the background of the shorter column will not fully fill the column. [8]

Current solution

CSS3 Flexible Box Layout (Flexbox)

The World Wide Web Consortium (W3C) has approached the layout issue through various proposals. The most mature proposal is the Flexible Box Modules (AKA Flexbox), which is in its status as of October 2017. [9] Setting an element to display flex or “inline-flex” causes the element to become a new type of container (similar to a block or inline block, respectively), with new methods of positioning child objects. Content can flow in any direction, and be displayed in any order. The W3C proposal contains an example of how to make the layout of a simple CSS rules, and makes the layout responsive to a simple media query rule. The module can also be used to address many other layout issues.

The Flexible Box Module is supported by the modern browsers. [10] Older browsers still have issues, but most of those (mainly Internet Explorer 9 and below) are no longer supported by their vendors. [11] Many designers will choose to provide compatible browsing for older browsers, to be updated in modern browsers by the new syntax. In spite of the continued existence of legacy browsers, this module is currently touted as a solution to the holy grail issue. [12] [13]

Upcoming solution

CSS3 Grid Layout

The Grid Layout Module similarly allows a designer to create a container for layout, which contains rows and columns of fixed or variable size in which elements can be placed. Although it is in Candidate Recommendation status (May 2017), [14] it has not yet achieved full browser support, especially in mobile browsers. [15] This module is a continuation of the previous work of the Grid Positioning Module, the Layout Module, and the Advanced Layout Module. [16]

One aspect of this module is the ability to create grid slots in a semi-graphically container, in a way that has been described as ” ASCII art “, as in the superseded Template Layout module. Despite the current lack of browser support, designers who wish to use this syntax can add to their pages through jQuery / javascript. [17]

Although the Flexible Box module is capable of performing page layout, it is intended for use in the user interface. Grid Layout would be preferred for laying out complex pages, [18]

History

The first three-column flanking design that used pure CSS was developed by Rob Chandanais of BlueRobot [19] for the site wrongwaygoback.com in 2001. At that point Neale Talbot was using JavaScript to determine the positioning of the right-hand column. Chandanais came up with an elegant solution for the positioning using pure CSS instead and soon after dubbed The Holy Grail by Eric Costello of Glish.com. [20]

See also

  • Tableless web design
  • Responsive web design

References

  1. Jump up^ .appendTo: Solving the Holy Grail Layout
  2. Jump up^ W3C: HTML5 / Elements / Semantics
  3. Jump up^ Build Internet Four Methods to Create Equal Height Columns
  4. Jump up^ A List Apart: False Columns
  5. Jump up^ W3C: Tableless Layout HOWTO
  6. Jump up^ Matthew James Taylor: Equal Height Columns with Cross-Browser CSS
  7. Jump up^ A List Apart: Articles: Multi-Column Layouts Climb Out of the Box
  8. Jump up^ Position is Everything: Equal Height Columns – revisited – In search of the True Layout
  9. Jump up^ W3C: Flexible CSS Layout Module Box
  10. Jump up^ “Can I use … Support tables for HTML5, CSS3, etc.” . CanIUse.com . Retrieved 2016-02-27 .
  11. Jump up^ “Internet Explorer End of Support” . Microsoft . Retrieved 2016-02-27 .
  12. Jump up^ .appendTo: Solving the Holy Grail Layout
  13. Jump up^ Holy Grail Layout – Solved By FlexBox – Cleaner, hack-free CSS
  14. Jump up^ W3C: CSS Grid Layout
  15. Jump up^ Can I use: CSS Grid Layout
  16. Jump up^ W3C: CSS Template Layout Module
  17. Jump up^ Google Code: css-template-layout
  18. Jump up^ Why Flexboxes Are not Good for Page Layout
  19. Jump up^ BlueRobot: Three Column Flanking ArchivedLayoutApril 25, 2013, at theWayback Machine.
  20. Jump up^ Glish.com Layout Techniques – 3 columns, The Holy Grail