Mobile Friendly Website


Doing it with style

EXPLORERGrid layout with 3 columns, center float area and touch controls

Date : 9th February 2013

For IE10

This demo is too wide for your mobile screen.
Please view on a tablet or PC.

Beatrix Potter's artistic and literary interests were deeply influenced by fairies, fairy tales and fantasy. She was a student of the classic fairy tales of Western Europe. As well as stories from the Old Testament, John Bunyan's The Pilgrim's Progress and Harriet Beecher Stowe's Uncle Tom's Cabin, she grew up with Aesop's Fables, the fairy tales of the Brothers Grimm and Hans Christian Andersen, Charles Kingsley's The Water Babies, the folk tales and mythology of Scotland, the German Romantics, Shakespeare, and the romances of Sir Walter Scott.

As a young child, before the age of eight, Edward Lear's Book of Nonsense, including the much loved The Owl and the Pussycat, and Lewis Carroll's Alice in Wonderland had made their impression, although she later said of Alice that she was more interested in Tenniel's illustrations than what they were about. The Brer Rabbit stories of Joel Chandler Harris had been family favourites and she later studied his Uncle Remus stories and illustrated them.

She studied book illustration from a young age and developed her own tastes, but the work of the picture book triumvirate Walter Crane, Kate Greenaway and Randolph Caldecott, the last an illustrator whose work was later collected by her father, was a great influence. When she started to illustrate, she chose first the traditional rhymes and stories, "Cinderella", "Sleeping Beauty", "Ali Baba and the Forty Thieves", "Puss-in-boots", and "Red Riding Hood". But most often her illustrations were fantasies featuring her own pets: mice, rabbits, kittens, and guinea pigs.


It has been a while since I produced an Explorer only demonstration, but with the arrival of IE10 comes support for CSS specifications that are not yet supported by any other browser.

This demonstrations shows how the 'grid' layout works and also putting text into columns. It also demonstration how you can place an exclusion zone in the middle of the three columns and have the text float around this. Finally it demonstrates the IE10 styles to control scrolling when using a touch screen device.

If you are using a touch screen with Windows 8 and IE10 then the image in the middle of the text can be scrolled using finger swipes and your progress will be shown by a small marker beneath the image. The scroll amount is controlled by the CSS and ensures that one image is changed to the next with just one swipe. If you do not have a touch screen then hovering over the image will show the horizontal scrollbar in IE10. This scrollbar will vanish if you move the mouse off the image.

So a fairly complex layout with just a few lines of stylesheet and simple code. It also degrades fairly well in other browsers.


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page