Download - The Crusade for the Holy Grail Layout
![Page 1: The Crusade for the Holy Grail Layout](https://reader038.vdocuments.us/reader038/viewer/2022100801/589cae0d1a28abbe4a8b54a9/html5/thumbnails/1.jpg)
The Crusade for the Holy Grail Layout
Adrian Sandu, @adysandu2 August, 2016, @DublinCSS
![Page 2: The Crusade for the Holy Grail Layout](https://reader038.vdocuments.us/reader038/viewer/2022100801/589cae0d1a28abbe4a8b54a9/html5/thumbnails/2.jpg)
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
![Page 3: The Crusade for the Holy Grail Layout](https://reader038.vdocuments.us/reader038/viewer/2022100801/589cae0d1a28abbe4a8b54a9/html5/thumbnails/3.jpg)
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
![Page 4: The Crusade for the Holy Grail Layout](https://reader038.vdocuments.us/reader038/viewer/2022100801/589cae0d1a28abbe4a8b54a9/html5/thumbnails/4.jpg)
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
![Page 5: The Crusade for the Holy Grail Layout](https://reader038.vdocuments.us/reader038/viewer/2022100801/589cae0d1a28abbe4a8b54a9/html5/thumbnails/5.jpg)
Faux-ColumnsBased on Dan Cederholm's idea - http://alistapart.com/article/fauxcolumns Based on Dan Cederholm's idea - http://alistapart.com/article/fauxcolumns
Demo: http://codepen.io/AdrianSandu/pen/GqXgOr
![Page 6: The Crusade for the Holy Grail Layout](https://reader038.vdocuments.us/reader038/viewer/2022100801/589cae0d1a28abbe4a8b54a9/html5/thumbnails/6.jpg)
Use JavaScript
Demo: http://codepen.io/AdrianSandu/pen/pbOJRv
![Page 7: The Crusade for the Holy Grail Layout](https://reader038.vdocuments.us/reader038/viewer/2022100801/589cae0d1a28abbe4a8b54a9/html5/thumbnails/7.jpg)
Fixed / Absolute Positioning
Demo: http://codepen.io/AdrianSandu/pen/YWOXBR
![Page 8: The Crusade for the Holy Grail Layout](https://reader038.vdocuments.us/reader038/viewer/2022100801/589cae0d1a28abbe4a8b54a9/html5/thumbnails/8.jpg)
Tables Everywhere Again (CSS display:table)
Demo: http://codepen.io/AdrianSandu/pen/PzdkOO
![Page 10: The Crusade for the Holy Grail Layout](https://reader038.vdocuments.us/reader038/viewer/2022100801/589cae0d1a28abbe4a8b54a9/html5/thumbnails/10.jpg)
Other Approaches
Nested Divisions Border Color
Bottom padding and negative margin
Experimental:
Grid Layout Module | Template Layout
![Page 11: The Crusade for the Holy Grail Layout](https://reader038.vdocuments.us/reader038/viewer/2022100801/589cae0d1a28abbe4a8b54a9/html5/thumbnails/11.jpg)
Questions?