The Holy Grail is a web page

Web page

A web page or webpage is a document or information resource that is suitable for the World Wide Web and can be accessed through a web browser and displayed on a monitor or mobile device. This information is usually in HTML or XHTML format, and may provide navigation to other web pages via hypertext...

 layout which is commonly desired and implemented, although the ways in which it can be implemented with current technologies all have drawbacks. Because of this, finding an optimal implementation has been likened to searching for the elusive Holy Grail

Holy Grail

The Holy Grail is a sacred object figuring in literature and certain Christian traditions, most often identified with the dish, plate, or cup used by Jesus at the Last Supper and said to possess miraculous powers...

.

The problem

Many web pages require a layout with multiple (often three) columns, with the main page content in one column (often the center), and supplementary content such as menus and advertisements in the other columns (sidebars). These columns commonly require separate backgrounds, with borders between them, and should appear to be the same height no matter which column has the tallest content. There are many obstacles to accomplishing this:

• CSS, although quite useful for styling, currently has limited capabilities for page layout.
• The height of block 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
  HTML
  HyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....
  
   is meant to be used semantically
  Semantic HTML
  Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation . Semantic HTML is processed by regular web browsers as well as by many other user agents...
  
  ; the purpose of HTML tags is to describe the type of content inside them. The appearance of a web page as rendered by a user agent
  User agent
  In computing, a user agent is a client application implementing a network protocol used in communications within a client–server distributed computing system...
  
   should be determined independently by style rules. Many implementations misuse HTML by using tables for non-tabular data, or nesting multiple div
  Span and div
  In HTML, the span and div elements are used where parts of a document cannot be semantically described by other HTML elements.Most HTML elements carry semantic meaning – i.e. the element describes, and can be made to function according to, the type of data contained within...
  
   tags without semantic purpose. Non-semantic use of HTML confuses users or user agent
  User agent
  In computing, a user agent is a client application implementing a network protocol used in communications within a client–server distributed computing system...
  
  s who are trying to discern the structure of the page content, and is an accessibility
  Web accessibility
  Web accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities. When sites are correctly designed, developed and edited, all users can have equal access to information and functionality...
  
   issue.
• As search engine
  Search engine
  A search engine is an information retrieval system designed to help find information stored on a computer system. The search results are usually presented in a list and are commonly called hits. Search engines help to minimize the time required to find information and the amount of information...
  
  s consider content in the beginning of a web page's source code
  Source code
  In computer science, source code is text written using the format and syntax of the programming language that it is being written in. Such a language is specially designed to facilitate the work of computer programmers, who specify the actions to be performed by a computer mostly by writing source...
  
   to be more relevant
  Search engine optimization
  Search engine optimization is the process of improving the visibility of a website or a web page in search engines via the "natural" or un-paid search results...
  
  , web designers desire the ability to place the content in the page source in an arbitrary order, without affecting the appearance of the page.
• Because of incorrect rendering
  Acid2
  Acid2 is a test page published and promoted by the Web Standards Project to expose web page rendering flaws in web browsers and other applications that render HTML. Named after the acid test for gold, it was developed in the spirit of Acid1, a relatively narrow test of compliance with the Cascading...
  
   of content by different browsers, a method that works in a standards-compliant browser will not work in one that does not implement CSS
  Cascading Style Sheets
  Cascading Style Sheets is a style sheet language used to describe the presentation semantics of a document written in a markup language...
  
   correctly.

Tables

Before the widespread implementation of CSS, tables were commonly used to lay out pages. Sometimes the layout required several tables to be nested inside each other. Although placing the columns inside table cells easily achieves the desired appearance, using a table is semantically incorrect. There is also no way to control the order of the columns in the page source.

Faux columns

This method uses a background image which provides the background colors and vertical borders of all three columns. The content of each column is enclosed in a division, and positioned over its background using floats and relative positioning. The background is normally 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 cannot be used for fluid center pages.

JavaScript

In this method, after the page is loaded, a script measures the height of each of the columns, and sets the height of each column to the greater value. This obviously will not work in browsers that do not support JavaScript

JavaScript

JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles....

, or have JavaScript disabled.
Although it is possible to fill the columns with content after they have been created, using Ajax

Ajax (programming)

Ajax is a group of interrelated web development methods used on the client-side to create asynchronous web applications...

 or similar technologies, this does not solve the search engine optimization

Search engine optimization

Search engine optimization is the process of improving the visibility of a website or a web page in search engines via the "natural" or un-paid search results...

(SEO) issue as many search engine robots will not see content that is output by scripts.

Fixed or absolute positioning

In this method, the corners of the column divisions are locked in a specific place on the page. This may be acceptable or even desired, but does not solve the holy grail problem as it is a significantly different layout. The consequences of this method may include having content appearing below the columns (such as a footer) fixed at the screen bottom, blank space under the column content, and requiring scrollbars for each column to view all the content.

Nested divisions

Since a division will grow in height to contain its content, if this containing division is assigned a background, the background will be as tall as the content. This behavior is used to solve the problem by creating three divisions nested inside each other which provide the three backgrounds. These divisions are placed in their proper position using floats and relative positioning, and the three content divisions are placed inside the innermost background division, and positioned. The background divisions 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.

Border color

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

Bottom padding

By placing a large amount of padding at the bottom of the column container, the background will extend far below the column content. A corresponding negative margin will bring content below the columns back into its proper position. Positioning is simple in this method, as the container of a column's content also contains 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.

CSS3

There are two proposed additions to the CSS standard which have the potential to solve this problem. The Template Layout module and the Grid Positioning module offer different methods of dividing the page into a grid, and positioning content in the grid's cells, spanning them as needed. As of March 2011, few if any browsers support these modules.