The document discusses various approaches to creating a three-column Holy Grail layout with a header and footer. It describes the desired features of the Holy Grail layout including fluid center column and fixed side columns that are all the same height, with the footer sticking to the bottom. It then examines and rejects the use of frames, tables, and faux columns, before demonstrating solutions using JavaScript, absolute positioning, CSS display: table, and Flexbox.

1. The Crusade for the Holy Grail Layout
Adrian Sandu, @adysandu
6 September, 2016, DublinJS

2. The Holy Grail Layout
Three-column layout, with header and footer:
● Fluid center and fixed sides
● All columns have same height
● Footer “sticks” to the bottom on low content*
● Content appears before sides*
● Minimum extra markup*
*) These features are “nice-to-have”, but not a requirement

3. Frames and Framesets
Disadvantages of frames:
● Search engines may not index a website made with frames
● Framed websites are not “bookmark friendly” - you can only bookmark the parent page
● Frames have accessibility problems
● Deprecated in modern versions of HTML

4. Tables! Tables everywhere!
Disadvantages of table-based design:
● Search engines have problems indexing the content
● Complex layouts are very difficult to maintain
● Lots of non-semantic markup

5. Faux-Columns
Based on Dan Cederholm's idea - http://alistapart.com/article/fauxcolumnsBased on Dan Cederholm's idea - http://alistapart.com/article/fauxcolumns
Demo: http://codepen.io/AdrianSandu/pen/GqXgOr

6. Use JavaScript
Demo: http://codepen.io/AdrianSandu/pen/pbOJRv

7. Fixed / Absolute Positioning
Demo: http://codepen.io/AdrianSandu/pen/YWOXBR

8. Tables Everywhere Again (CSS display:table)
Demo: http://codepen.io/AdrianSandu/pen/PzdkOO

9. Flexbox
Demo: http://codepen.io/AdrianSandu/pen/mEGVjB

10. Other Approaches
Nested Divisions Border Color
Bottom padding and negative margin
Experimental:
Grid Layout Module | Template Layout

11. Questions?