A | B | C | D | E | F | G | H | CH | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
Cascading Style Sheets |
---|
Concepts |
Philosophies |
Tools |
Comparisons |
The holy grail is a web page layout which has multiple equal-height columns that are defined with style sheets. It is commonly desired and implemented, but for many years, the various ways in which it could be implemented with available technologies all had drawbacks.[1] Because of this, finding an optimal implementation was likened to searching for the elusive Holy Grail.
The limitations of CSS and HTML, the desirability of semantically meaningful pages that rank well in search engines, and the deficiencies of various browsers combined historically to create a situation in which there was no way to create this type of layout that would be considered totally correct. As the underlying technologies did not provide a proper solution, web designers found various ways to work around the limitations. Common workarounds included changes in page structure, the addition of graphics, scripting, and the creative use of CSS. These methods were imperfect, inconvenient, and considered by some to be abuse of the web standards and their intent.
More recent web standards have provided much more complete and robust solutions for implementing this layout. In particular, the CSS Flexible Box Layout and CSS Grid Layout modules have both provided full solutions.[2][3]
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. A common requirement is that the sidebars have a fixed width, with the center column adjusting in size to fill the window (fluid or liquid layout). Another common requirement is that, when a page does not contain enough content to fill the screen, the footer should drop to the bottom of the browser window instead of leaving blank space underneath.
There were many obstacles to accomplishing this:
- CSS, although quite useful for styling, had 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 is meant to be used semantically; HTML elements should be chosen which accurately describe their content. The appearance of a web page as rendered by a user agent should be determined independently by style rules. Many implementations misuse HTML by using tables for non-tabular content, or nesting multiple div elements without semantic purpose. Non-semantic use of HTML confuses users or user agents who are trying to discern the structure of the page content, and is an accessibility issue.[4]
- As search engines may consider content in the beginning of a web page's source code to be more relevant, and content is read in source code order when viewed by some user agents such as screen readers, 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 of content by different browsers, a method that works in a standards-compliant browser may not work in one that does not implement CSS correctly.
Known workarounds
Tables
Before the widespread implementation of CSS, designers commonly used tables to lay out pages. Sometimes they achieved their desired layout by nesting several tables inside each other. Although placing the columns inside table cells easily achieves the desired visual appearance, using a table is semantically incorrect, although the "role" WAI-ARIA HTML attribute can be set to "presentation" to regain semantic context. There is also no way to control the order of the columns in the page source.
Divisions with display:table
It is possible to make columns equal height using the CSS display
property.[5] This requires nested container divisions that are set to display: table
and display: table-row
, and columns that are set to display: table-cell
. This is semantically correct, as only the display is affected. However, this method lacks the ability to control the order of the source code. It will also not work with some older, unsupported browsers, such as Internet Explorer 7.
Faux columns
This method uses a background image which provides the background colors and vertical borders of all three columns.[6] The content of each column is enclosed in a division, and positioned over its background using techniques such as floats, negative margins, 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 will not work in browsers that do not support JavaScript, or have JavaScript disabled.
Fixed or absolute positioning
In this method, the corners of the column divisions are locked in a specific place on the page.[7] 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
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 nested inside each other which provide the three backgrounds. These divisions are placed in their proper location using positioning techniques, and the three content divisions are placed inside the innermost background division, positioned over their respective backgrounds. 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.[8]
Border color
A simpler version of the nested division method entails using a single container division. The background properties of this division provide 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. This method still uses one non-semantic division, and makes it difficult to apply background images and borders to the sidebars.[9]
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.[10]
Current solutions
The CSS3 standards contain modules which can properly lay out page elements. Two of these fully solve the holy grail problem.[1][11] Support for these modules is lacking or otherwise deficient in older browsers. Many designers will implement these modules while providing compatible styling for older browsers, which will be overridden in modern browsers by the new syntax. Support for older browsers became less important in 2020, when extended support for Windows 7 ended, and use of Internet Explorer became less common.
CSS 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 Layout Module (A.K.A. Flexbox), which is in Candidate Recommendation status as of November 2018.[12] Setting an element's display property to display: flex
or display: 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. The W3C proposal contains an example which achieves the holy grail column layout using four simple CSS rules, and makes the layout responsive with a simple media query rule. The module can also be used to address many other layout issues.
The Flexible Box Layout Module is supported in all of the modern browsers, although Internet Explorer's implementation has issues.[13]
CSS 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 into which elements can be placed. It is in Candidate Recommendation status as of December 2020.[14] It is supported in all modern browsers, however Internet Explorer's implementation has issues.[15] This module is a continuation of previous work done as the Grid Positioning Module, Template Layout Module, and Advanced Layout Module.[16]
One aspect of this module is the ability to create grid slots in a container semi-graphically, in a manner that has been described as "ASCII art", as in the superseded Template Layout module.
Although the Flexible Box module is capable of performing 2-dimensional page layout, its intended purpose is to position elements primarily along a single axis. Grid Layout is preferred for laying out complex pages, and pages whose layout varies greatly in a responsive design.[17]
History
This section needs expansion. You can help by adding to it. (September 2015) |
The first three-column flanking design that used pure CSS was developed by Rob Chandanais of BlueRobot[18] 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.[19]
See also
References
- ^ a b .appendTo: Solving the Holy Grail Layout
- ^ "Holy Grail Layout — Solved by Flexbox — Cleaner, hack-free CSS". philipwalton.github.io. Retrieved 2019-03-26.
- ^ "The Holy Grail Layout with 5 Lines of CSS". CSS-Tricks. Retrieved 2019-03-26.
- ^ "HTML Standard". html.spec.whatwg.org.
- ^ Build Internet: Four Methods to Create Equal Height Columns
- ^ Cederholm, Dan (January 9, 2004). "Faux Columns". A List Apart.
- ^ "Tableless layout HOWTO". www.w3.org.
- ^ "Equal-Height Columns (CSS Grid, Flexbox, & Table Methods)". Matthew James Taylor.
- ^ Pearce, Alan (August 6, 2008). "Multi-Column Layouts Climb Out of the Box". A List Apart.
- ^ "CSS Equal Height Columns: Practical Guide With Code Examples". www.positioniseverything.net. December 15, 2021.
- ^ "Holy Grail Layout — Solved by Flexbox — Cleaner, hack-free CSS". philipwalton.github.io.
- ^ "CSS Flexible Box Layout Module Level 1". www.w3.org.
- ^ "Can I use... Support tables for HTML5, CSS3, etc". CanIUse.com. Retrieved 2016-02-27.
- ^ "CSS Grid Layout Module Level 1". www.w3.org.
- ^ "CSS Grid Layout (level 1) | Can I use... Support tables for HTML5, CSS3, etc". caniuse.com.
- ^ Bos, Bert; Acebal, César (March 26, 2015). "CSS Template Layout Module". www.w3.org.
- ^ "Why Flexboxes Aren't Good for Page Layout — Tab Completion". www.xanthir.com.
- ^ "Blue Robot | Messaging, Chat Bots & Social Experiences". www.bluerobot.com. Archived from the original on April 25, 2013.
- ^ "Glish.com Layout Techniques – 3 columns, The Holy Grail". Archived from the original on 2008-12-01. Retrieved 2013-05-15.
Text je dostupný za podmienok Creative Commons Attribution/Share-Alike License 3.0 Unported; prípadne za ďalších podmienok. Podrobnejšie informácie nájdete na stránke Podmienky použitia.
Číňané
Časová osa ruské invaze na Ukrajinu (2022)
Černá Hora
Česká terminologická databáze knihovnictví a informační vědy
Česká verze Wikipedie
Česká Wikipedie
České vysoké učení technické v Praze
Československá armáda
Československá národní rada
Československo
Ču Jou-sung
Říše Čching
Říše Ming
Řím
Šablona:Citation
Šablona:Cite web
1. duben
1. květen
1. září
10. duben
10. prosinec
11. duben
12. duben
12. květen
13. červen
13. duben
14. duben
14. srpen
1488
15. červen
15. duben
15. květen
15. září
1523
1555
1584
1585
16. duben
16. leden
1619
1651
1652
1661
1671
1673
1674
1677
17. březen
17. duben
1706
1711
1717
1719
1729
1730
1735
1742
1752
1757
1763
1767
1774
1776
1782
1783
1784
1785
1790
1796
18. únor
18. duben
18. leden
1805
1811
1814
1816
1818
1822
1828
1829
1837
1838
1849
1852
1855
1862
1864
1868
1870
1871
1876
1878
1880
1882
1885
1886
1891
1892
1893
1895
19. duben
19. listopad
1900
1904
1906
1907
1910
1912
1913
1917
1918
1919
1920
1921
1922
1924
1926
1929
1930
1933
1935
1936
1940
1942
1945
1946
1947
1949
1950
1952
1953
1958
1960
1965
1973
1976
1977
1985
1987
1989
1990
1992
1995
2. červen
2. duben
2. květen
20. duben
2000
2001
2002
2003
2005
2008
2010
2012
2015
2017
2019
2020
2023
21. červen
21. červenec
21. březen
22. duben
23. duben
24. březen
24. duben
24. listopad
24. prosinec
25. duben
25. prosinec
26. duben
27. duben
28. duben
29. únor
29. březen
29. duben
29. srpen
3. únor
3. duben
30. duben
31. červenec
31. březen
31. prosinec
4. říjen
4. duben
4. květen
43 př. n. l.
5. říjen
5. březen
5. duben
5. květen
6. duben
7. duben
753 př. n. l.
8. duben
8. listopad
9. říjen
9. duben
9. září
Aš
ActiveX
Alžběta II.
Alžběta Vilemína Württemberská
Alexandra
Alt attribute
Amálie Vilemína Brunšvicko-Lüneburská
Andie MacDowell
Anthony Quinn
Antonín Kammel
Antonín Novák (houslista)
API
Apple
Apple II
Armáda Spojených států amerických
Article element
Autoritní kontrola
Azovstal
Bedřich Beneš Buchlovan
Benutzer:Kurt Jansson/Vortrag auf dem 19C3
Benutzer:Kurt Jansson/Vortrag auf dem 19C3
BiggestWiki
Bitva o Madagaskar
Bitva o Mariupol
Bitva u Liberce
Bitva u Mutiny
Bitva u Puebly
Blink element
Bořivoj Lůžek
Bob Hurikán
Bologna
Bracket#Angle brackets
Brasília
Brazílie
Britská armáda
Browser engine
Browser Object Model
Bzenecká lípa
Cache (computing)
CamelCase
Canvas element
Cascading Style Sheets
Character encodings in HTML
Charles-Joseph de Flahaut
Charles Darwin
Charlotte Brontëová
Chu Čeng-jen
Commons:Featured pictures/cs
Comparison of browser engines
Comparison of document markup languages
Comparison of stylesheet languages
CSS
CSS#Sources
CSS animations
CSS box model
CSS Flexible Box Layout
CSS grid layout
CSS image replacement
CSS Zen Garden
Diff
Digital container format
Div and span
Document file format
Document Object Model
Document Style Semantics and Specification Language
DokuWiki
Doněcké akademické oblastní činoherní divadlo
Druhá světová válka
Duben
Dynamic HTML
Dynastie Jižní Ming
Edita Štaubertová
Ekonomické důsledky ruské invaze na Ukrajinu (2022)
Emilia Galotti
Emmanuel Macron
Encyclopædia Britannica
Encyklopedie
Encyklopedie Navajo
Evoluce
Fantasy
Fault-tolerant system
Ferdinand Peroutka
Fieldset
File:HTML5 logo and wordmark.svg
File:Question book-new.svg
File:Wikibooks-logo.svg
Filename extension
Filmová promítačka
First-person shooter
Font family (HTML)
Formatting Output Specification Instance
Frame (World Wide Web)
François Athanase de Charette de la Contrie
Francie
Francouzská armáda
Francouzská intervence v Mexiku
Francouzská národní knihovna
František Ferdinand Šamberk
František Suchý Pražský
Fredrik Bajer
Friedrich Fröbel
Gemeinsame Normdatei
Georg Joseph Kamel
Glen Hansard
Gotthold Ephraim Lessing
Gregoriánský kalendář
Guy Lafleur
Hannibal Goodwin
Havajština
Help:HTML in wikitext
Help:Maintenance template removal
Help:Referencing for beginners
Hippolyte Taine
Hlavní strana
Hnutí Svoboda (Slovinsko)
Holy grail (web design)
Honolulu
Hospodářský růst
HTML
HTML5
HTML5 audio
HTML5 video
HTML attribute
HTML editor
HTML element
HTML element#Images and objects
HTML elements
HTM (disambiguation)
Humphry Repton
Hyperlink
Hypertext
HyperText Markup Language
Iggy Pop
Ignacio Zaragoza
Ignatius Krahl
Ingenuity
International Standard Book Number
Internetová diskuse
Internetový bot
Internet Explorer
IP adresa
Isaac Asimov
Itálie
Ivan Petrovič Kulibin
Janez Janša
Jan Štrobl
Jan Kostrhun
Jan Pavel II.
Jan van Riebeeck
Jarmila Stojčevská
Jaroslav Hýbl
Jaroslav Hutka
Jaroslav Kvapil (skladatel)
JavaScript
JavaScript Style Sheets
Jean-Baptiste Biot
Jiří Čepelák
Jiří Hrubeš
Jiřina Šedinová
Johann Christian Ferdinand Höfer
John Law
Josef I. Habsburský
Joseph Vaz
Jozef Herda
Judita Čeřovská
Kaligrafie
Kapské Město
Karel Balling (chemik)
Karel Pippich
Karlštejn
Kategorie:Čas
Kategorie:Články podle témat
Kategorie:Život
Kategorie:Dorozumívání
Kategorie:Geografie
Kategorie:Historie
Kategorie:Hlavní kategorie
Kategorie:Informace
Kategorie:Kultura
Kategorie:Lidé
Kategorie:Matematika
Kategorie:Příroda
Kategorie:Politika
Kategorie:Právo
Kategorie:Rekordy
Kategorie:Seznamy
Kategorie:Společnost
Kategorie:Sport
Kategorie:Technika
Kategorie:Umění
Kategorie:Věda
Kategorie:Vojenství
Kategorie:Vzdělávání
Kategorie:Zdravotnictví
Klaus Schulze
Kuo-c’-ťien
Květen
Ladislav Koubek
Ladislav Pavelka
Language code
Lee de Forest
Leopold Antonín Podstatský
Less (stylesheet language)
Less (style sheet language)
Library of Congress Control Number
Lidé a země
Listopad
List of style sheet languages
List of XML and HTML character entity references
Lodovico Carracci
Louis-Auguste Bisson
Lynx (browser)
Madagaskar
Maia Sanduová
Manuel Estiarte
Marcus Antonius
Maria Anna Sala
Mariupol
Markup (computer programming)
Markup language
Marquee element
Meda Mládková
MediaWiki
Media type
Metapedie
Meta element
Mezinárodní měnový fond
Michel Rolle
Miloš Zeman
Mittelbau-Dora
Moldavsko
Mozilla Firefox
Mwai Kibaki
Nápověda:Úvod
Nápověda:Úvod pro nováčky
Národní knihovna České republiky
Národní knihovna Izraele
Návrhový vzor
Nadace Wikimedia
Nanking
Necyklopedie
Nikola Buranská
Norbert Frýd
Nosticovo divadlo
Nupedia
Odbory
Olbram Zoubek
Open file format
Opera (web browser)
Osecký klášter
Otevřený software
Oxford English Dictionary
Pandemie covidu-19
Pandemie covidu-19 v Česku
Partyzán
Paul Karrer
Pavel Zářecký
Pavol Mešťan
Pečeť
Perseverance
Petr Nečas
Petr Pokorný (teolog)
Petr Rak
Plnotext
Plugin
Podněstří
Polsko
Portál:Aktuality
Portál:Doprava
Portál:Geografie
Portál:Historie
Portál:Kultura
Portál:Lidé
Portál:Náboženství
Portál:Obsah
Portál:Příroda
Portál:Sport
PostCSS
Praha
Pravda (noviny)
Prezident
Programovací jazyk
Q171#identifiers
Q171#identifiers|Editovat na Wikidatech
Qt (software)
Quirks mode
Radim Uzel
Refreshable Braille display
Responsive web design
Rio de Janeiro
Robert Fico
Robert Golob
Robert Kaliňák
Robert Saudek
Robert Smith (hudebník)
Ruská invaze na Ukrajinu (2022)
Rusko
Sýrie
Safari (web browser)
Sass (stylesheet language)
Sass (style sheet language)
Scripting language
Sedmiletá válka
Semantics
Semantic Web
Separation of concerns
Separation of content and presentation
Seznam českých wiki encyklopedií
Slávka Budínová
Slovenska demokratska stranka
Slovensko
Slovinsko
SMIL Timesheets
Sociální software
Software
Software release life cycle
Soubor:Andie MacDowell Cannes.jpg
Soubor:Anthony Quinn signed.JPG
Soubor:Apple-II.jpg
Soubor:Flag of Mars.svg
Soubor:GlenHansard.jpg
Soubor:HNL Wiki Wiki Bus.jpg
Soubor:Hutka.simecek.jpg
Soubor:IggyChesterRocks.jpg
Soubor:Manel Estiarte (Diada de Sant Jordi 2009).jpg
Soubor:Olbram-Zoubek.jpg
Soubor:Paul Karrer.jpg
Soubor:Persimmon and Three Yellow Tangerines.jpg
Soubor:Queen Elizabeth II March 2015.jpg
Soubor:Robert Smith of The Cure live in Singapore 1 August 2007.jpg
Speciální:Kategorie
Speciální:Nové stránky
Speciální:Statistika
Speciální:Zdroje knih/0-201-71499-X
Speciální:Zdroje knih/2-9520514-4-5
Speciální:Zdroje knih/9781448855575
Spojené státy americké
Standard Generalized Markup Language
Strojový překlad
Structured document
Stuttgart
Style sheet (desktop publishing)
Style sheet (web development)
Style sheet language
Stylish
Stylus (browser extension)
Stylus (stylesheet language)
Stylus (style sheet language)
Světová ekonomika
Třída T 47
Tableless web design
Template:CSS
Template:HTML
Template:Stylesheet languages
Template talk:CSS
Template talk:HTML
Template talk:Stylesheet languages
Teroristické útoky na Srí Lance 21. dubna 2019
Theodor Kašpárek
Tiskař
Turecko
TWiki
Type code
Ukrajina
Ulrich von Hutten
Unicode and HTML
Uniform Type Identifier
UseModWiki
User agent
User interface style sheet language
Václav Cigler
Vídeň
Věra Nerušilová
V-2
Vannevar Bush
Vichistická Francie
Viktor Janiš
Viktor Zvjahincev
Vláda Černé Hory
Vladimír Hulpach
Vlasta Prachatická
Vojtěch Říhovský
Volby prezidenta Francie 2022
Vzdušný prostor
W3C Markup Validation Service
Ward Cunningham
Web3D
WebCL
WebGL
WebGPU
Webový prohlížeč
Webpage
WebXR
Web browser
Web colors
Web content
Web design
Web page
Web server
Web storage
WHATWG
Wiki
Wikicitáty:Hlavní strana
Wikidata:Hlavní strana
Wikiknihy:Hlavní strana
Wikimedia Česká republika
Wikimedia Commons
Wikipedia:Verifiability
Wikipedie
Wikipedie:Údržba
Wikipedie:Časté chyby
Wikipedie:Často kladené otázky
Wikipedie:Článek týdne
Wikipedie:Článek týdne/2022
Wikipedie:Citování Wikipedie
Wikipedie:Dobré články
Wikipedie:Dobré články#Portály
Wikipedie:Kontakt
Wikipedie:Nejlepší články
Wikipedie:Obrázek týdne
Wikipedie:Obrázek týdne/2022
Wikipedie:Požadované články
Wikipedie:Pod lípou
Wikipedie:Portál Wikipedie
Wikipedie:Potřebuji pomoc
Wikipedie:Průvodce
Wikipedie:Seznam jazyků Wikipedie
Wikipedie:Velvyslanectví
Wikipedie:Vybraná výročí dne/květen
Wikipedie:WikiProjekt Kvalita/Články k rozšíření
Wikipedie:Zajímavosti
Wikipedie:Zajímavosti/2022
Wikipedie:Zdroje informací
WikiSkripta
Wikislovník:Hlavní strana
Wikiverzita:Hlavní strana
Wikizdroje:Hlavní strana
Wikizprávy:Hlavní strana
Wiki (rozcestník)
Wiki Wiki Shuttle
Wolfenstein 3D
World Wide Web
World Wide Web Consortium
WYSIWYG
XHTML
XHTML Basic
XHTML Mobile Profile
XSL
XSLT
Zdeněk Fiala
Značkovací jazyk
Zvukový film
Text je dostupný za podmienok Creative
Commons Attribution/Share-Alike License 3.0 Unported; prípadne za ďalších
podmienok.
Podrobnejšie informácie nájdete na stránke Podmienky
použitia.
www.astronomia.sk | www.biologia.sk | www.botanika.sk | www.dejiny.sk | www.economy.sk | www.elektrotechnika.sk | www.estetika.sk | www.farmakologia.sk | www.filozofia.sk | Fyzika | www.futurologia.sk | www.genetika.sk | www.chemia.sk | www.lingvistika.sk | www.politologia.sk | www.psychologia.sk | www.sexuologia.sk | www.sociologia.sk | www.veda.sk I www.zoologia.sk