CSS play - IE10 ONLY - Grid layout with 3 columns, center float area and touch controls

9th February 2013

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.

copyright © stu nicholls - CSS play

Information

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.



Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.



Please Support CSS play

Please note that if your donation is for a demo/menu then you will need to email me with the url of the demo/menu after making the donation

For more CSS demonstrations I recommend that you visit the Dynamic Drive CSS Library.


Free, practical CSS menus, layouts, and examples

Follow CSS play


Facebook   Twitter   Facebook Fan Page