Alright, it’s time to put new features of CSS3 on practice. Do you remember how much of a headache it was to build a “holy grail” layout by using or ? The part when we needed to stick a footer to the bottom of a browser was a real challenge. But thanks God good guys from w3c decided to help us by introducing the flexbox layout model. I suggest to test it and try to build a holy grail layout using flexbox.

Holy grail layout is a page with a header, two sidebars, main section and sticked to the bottom footer.

holy grail layout

Also to make the experiment more challenging lets make our layout more SEO friendly and put the content section before its siblings in code.

HTML

CSS