The Crusade for the Holy Grail Layout

Adrian Sandu, @adysandu6 September, 2016, DublinJS

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

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

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

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

Use JavaScript

Demo: http://codepen.io/AdrianSandu/pen/pbOJRv

Fixed / Absolute Positioning

Demo: http://codepen.io/AdrianSandu/pen/YWOXBR

Tables Everywhere Again (CSS display:table)

Demo: http://codepen.io/AdrianSandu/pen/PzdkOO

Flexbox

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

Other Approaches

Nested Divisions Border Color

Bottom padding and negative margin

Experimental:

Grid Layout Module | Template Layout

Questions?