CSS play - Flexbox layout with sticky footer
3rd March 2014
For IE10+, Firefox, Chrome, Opera (Developer) and Android OS
Information
This layout has been produce using the latest Flexbox styling which works in all the latest browsers and operating systems.
Safari does not yet support the flexbox styling so will need the earlier display: -webkit-box; and associated styling.
It is fully responsive and re-orders the elements when viewed on tablets and smartphones.
The content appears first in the page code but the flexbox styling rearranges this to place the horizontal navigation below the header and above the content.
The demo above shows how to center an image within a flexible element.