For IE10+, Firefox, Chrome, Opera (Developer) and Android OS
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.
What it's all about ..
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
The above quote, taken from the W3C website, is one of the reasons for this site. Whilst I agree that it is a mechanism for adding style to web documents, I do not agree that it is a SIMPLE mechanism. It can be very complicated, as I found out when I took my first steps down this path.
.. a little bit about us
CSS play is a partnership between myself and my wife. My name is Stuart Nicholls, but known to everyone as just Stu. I am 67 years old, married with two children, worked as an electronics design draughtsman, until I resigned to become a self employed (freelance) web designer/adviser, and have a passion for computers and photography.