Holy grail layout

The Holy Grail Layout is a classic CSS problem with various solutions presented over time


  1. have a fluid center with fixed width sidebars,
  2. allow the center column to appear first in the source,
  3. allow any column to be the tallest,
  4. require only a single extra div of markup, and
  5. require very simple CSS, with minimal hacks patches.

A01

A02

A03

A04

A05

A06

A07

A08

A09

A10

A11

A12

A13

A14

A15

A16

A17

A18

A19

A20

A21

A22

A23

A24

A25

A26

A27

A28

A29

A30