A short glimpse at the ways people tried to achieve the Holy Grail of Web Page Layout.

1. The Crusade for the Holy Grail Layout
Adrian Sandu, @adysandu
2 August, 2016, @DublinCSS

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?