Talk:Holy grail (web design)

History Section

A non-logged in user added the history section, so I can't ask for better references. I'm not going to question the facts today, just clean up the references. I've marked one ref as a dead link, and deleted another as it's simply a link to a site (which doesn't even use a three column theme), not a source of info on the topic. I'm leaving in the Glish link, even though it's hardly authoritative, and its columns aren't equal height.

There is a big gap in the history between the first CSS layouts and the current technology. Can anyone say who pioneered the equal-height CSS layout? — Preceding unsigned comment added by Davidlark (talk • contribs) 20:11, 10 September 2015 (UTC)

CSS3 will eliminate issue

Regarding https://en.wikipedia.org/w/index.php?title=Holy_Grail_%28web_design%29&type=revision&diff=613047515&oldid=612537787, I believe that the references given should satisfy the citation requirement. The statement being questioned is "When these standards become mature, and nonconforming browsers are no longer in common use, the Holy Grail problem will have become a non-issue."

Flexbox as a cure for this and other layout issues should not be controversial. Both of these articles state that flexbox is a solution to the problem. These pages are highly rated, coming up in the top ten results for the phrase "holy grail layout" in all major search engines, so I believe they qualify as reliable sources. As to the non-issue phrase, one could apply common sense to this:

1. Older technology will eventually become obsolete
2. Obsolete technology will become disused and replaced
3. Replacement technology will follow modern standards
4. The history of technology verifies the previous statements
5. Modern standards fix the problem
6. The problem will be fixed.

Although my reliance on this chain of logic could be considered OR, I believe that most readers would reach the same conclusion by themselves once they have looked at the articles.

As for Grid Layout, it's intention is to solve this and other types of layout issues (in a newspaper column way). It is not as mature as flexbox, so there is less written about it. A cursory search found mostly articles for third party CSS/JS workarounds. I could probably dig around W3C internal discussions for a cite, but I have better things to do.

After a reasonable time period for discussion, I will remove the citation request unless convinced otherwise. In several years, after the Grail is a non-issue, I expect this article to be proposed for deletion. In the meantime, I will continue to maintain it as an entrance portal for those who are struggling with the problem. I wish this article existed when I was starting to theme websites.

Davidlark (talk) 22:05, 17 August 2015 (UTC)

OOPS: I wouldn't have bothered to write the above essay if I had noticed that the user in question has been blocked indefinitely. So I have already removed the cite request. If you object, let's talk here. but thanks, chealer, for pushing me to improve the article. Davidlark (talk) 22:12, 17 August 2015 (UTC)

Vandalism?

Four edits were made to this page by 141.158.210.10 , adding the text "There is also no way to control the order of the columns in the page source" to sections of this article. In each case, the statement is technically incorrect, as content can be placed in any order and positioned over its background. For now, I'm undoing these edits. If there is anyone with a differing opinion, let's talk it out here. Davidlark (talk) 06:13, 20 October 2011 (UTC)

External links modified

Hello fellow Wikipedians,

I have just added archive links to one external link on Holy Grail (web design). Please take a moment to review my edit. If necessary, add {{cbignore}} after the link to keep me from modifying it. Alternatively, you can add {{nobots|deny=InternetArchiveBot}} to keep me off the page altogether. I made the following changes:

• Added archive https://web.archive.org/20130425001822/http://bluerobot.com:80/web/layouts/layout3.html to http://bluerobot.com/web/layouts/layout3.html

When you have finished reviewing my changes, please set the checked parameter below to true to let others know.

This message was posted before February 2018. After February 2018, "External links modified" talk page sections are no longer generated or monitored by InternetArchiveBot. No special action is required regarding these talk page notices, other than regular verification using the archive tool instructions below. Editors have permission to delete these "External links modified" talk page sections if they want to de-clutter talk pages, but see the RfC before doing mass systematic removals. This message is updated dynamically through the template {{source check}} (last update: 18 January 2022).

• If you have discovered URLs which were erroneously considered dead by the bot, you can report them with this tool.
• If you found an error with any archives or the URLs themselves, you can fix them with this tool.

Cheers.—^{cyberbot II}_{Talk to my owner:Online} 22:04, 1 February 2016 (UTC)

Recent reorganization

I have thought about the recent changes contributed by Camilo.uribe , and have the following comments:

• The web page needs to evolve as this issue is cured. I see the need for differentiating past, present, and future.
• "Old solutions" is not the best descriptions; these techniques do not solve things, they only make them better. A better heading might be "Traditional workarounds" or "Historical workarounds" or "Legacy workarounds".
• "New solutions: IE8+" also is not the best descriptor; I would prefer "CSS3 solutions" or "Current solution". * Divisions with display:table is not a solution because it still has the source code order issue.
• "Solutions with very limited browser support" doesn't work for me either; I'd rather have "Upcoming solution".

If no one objects, I'll come back and rename the headings, and move display:table back into the workaround category. — Preceding unsigned comment added by Davidlark (talk • contribs) 21:27, 29 July 2016 (UTC)

Done. Your comments are welcome. Davidlark (talk) 20:09, 13 August 2016 (UTC)

Outdated article? Holy Grail is dead.

The article starts with the sentence: "The Holy Grail refers to a web page layout which has multiple, equal height columns that are defined with style sheets. It is commonly desired and implemented, although the ways in which it can be implemented with current technologies all have drawbacks."

I don't really see a reason, why this is still considered to be true with todays support for HTML 5 and CSS 3. A simple solution with CSS 3 without the need for any fancy hacks that I personally use and which works in all browsers:

<!DOCTYPE html>
<html>
	<head>
	<style>
		body {
			background: rgba(0, 255, 0, 0.2);
			margin: 0;
		}

		#contentWrapper {
			display: table;
			width: 100%;
			background: white;
		}

		#contentWrapper > div {
			display: table-cell;
		}

		#contentWrapper > div:nth-child(1) {
			width: 200px;
			background: lightgray;
		}

		#contentWrapper > div:nth-child(3) {
			background: rgba(255, 0, 0, 0.2);
		}

		#header {
			background: #83CAFF;
		}
	</style>
	</head>
	<body>
		<div id="header">header</div>
		<div id="contentWrapper">
			<div>left</div>
			<div>center<br>hello<br>world</div>
			<div>right</div>
		</div>
		<div>footer</div>
	</body>
</html>

HTML and CSS are separated, no floats (order of tags is logical) or fancy margins with negative values or absolute positioning. Columns behave like table cells and you can use as much of them as you want. Column width can be set in absolute or relative values or left out completely and their height is always 100%, so no problem with backgrounds. The footer background can be left transparent, so it looks like it always extends to the bottom of the window, without setting the height to 100% somewhere. I see no disadvantages. Works in all browsers for years. Short and clean. --Very hungry Yeti (talk) 15:53, 3 October 2016 (UTC)

It seems like everyone has their favorite method, and they all have drawbacks. The drawback to your method is that you cannot put the center (page content) column first in the source. This is an inconvenience to the visually impaired and others, and hurts SEO. Sleazier web sites would put two advertising columns first in the source.

I still see a need for this article. Flexbox has issues with other aspects of responsive design, per the cite. The only drawback to Grid Layout is the lack of adoption. I would entertain your thoughts on what to do with this page at some future time when this is not an issue. AFD, or change it to past tense for posterity? I believe that this article serves a need today, as I wish I had had it as a starting place when I began designing pages. Davidlark (talk) 22:30, 7 February 2017 (UTC)

bruh moment

Someone from the far future of the year 2014 needs to go through this article and sort out what's what... flexbox has been around for a while. jp×g🗯️ 09:55, 16 December 2023 (UTC)