Mobile Friendly Website

CSSPLAY

Doing it with style

LAYOUT DEMONSTRATIONS

Cross browser FIXED
Fixed header and footer, scrolling content.
Simple minimum width layout
A layout to demonstrate min-width in Internet Explorer.
Back to BASICS
The bare essentials of Layout 3.
Back to BASICS 2
The bare essentials of Layout 2.
CSS Frame - The Holy Grill
A method of emulating a 'frame' layout.
position:fixed; (fixed)
Position fixed for Internet Explorer.
Shrink your body
Resizing the body tag to create a fixed layout.
IE6 only web site
This was for IE only, but now Firefox will work.
'Fixed' layout version 1
Fixed width, header and footer 100% high.
'Fixed' layout version 2
Full width and height. Fixed header, footer and left navigation.
'Fixed' layout version 4
Full height, fixed header and footer, multiple scrolling columns.
Semi-fixed footer
28-11-2008

A semi-fluid layout with a semi-fixed footer.
100% 'background' image
Adding an image in the background that resizes when the window resizes.
A responsive layout
01-05-2013

A reponsive layout with animated repositioning.
Three columns
Two simple methods of producing a three column layout with header and footer.
100% 'background' image - CSS3
28-07-2010

Adding an image in the background that resizes when the window resizes using CSS3.
A two column equal height layout
16-11-2010

A two column 50/50 split layout with equal height and background images
3 column layouts - 7 variations
04-02-2009

A set of 7 variations on the 3 column layout theme. All equal heights.
'Fixed' layout version 3
Full width and height. Fixed header, footer and left navigation with content scrollbar.
Basic flexbox layout » 05-03-2014
Back to the very basic code and style to produce a three column, header, sticky footer using flexbox
Fluid Layout
02-02-2009

A Fluid layout with max/min width, header/footer and all columns reach footer.
Flexbox layout
03-03-2014

A layout using the latest Flexbox styling to have three columns, header, sticky footer and responsive styling.
A responsive single page website
05-09-2014

A simple css and jQuery responsive single page website with slanted sections and smooth scrolling navigation.
Responsive 'vertical blinds' layout
06-08-2014

A second basic 'curtains' layout this time working in the opposite direction. Suitable for all browsers and OS.
Responsive 'horizontal blinds' layout
10-08-2014

A CSS only responsive horizontal blinds with information panels suitable for all the latest browsers and OS.
Responsive full screen vertical slideshow
26-08-2014

A simple css and jQuery responsive vertical scrolling slideshow for all modern browsers and OS.
Responsive 'curtains' layout
04-08-2014

A basic 'curtains' layout where page sections stop scrolling when viewed and content below overlaps. Suitable for all browsers and OS.
A second responsive single page website
15-09-2014

A simple css and jQuery responsive single page website with wavy sections and smooth scrolling navigation.
An experimental layout using viewport
29-05-2015

An experimental layout using css and viewport, buggy in Opera, fails in Safari PC
A second experimental layout using viewport
03-06-2015

A second experimental layout using css and viewport, for all the latest browsers and OS, except Safari PC.
Another experimental layout using viewport
11-06-2015

Another experimental 3x3 grid layout using css and viewport, for all the latest browsers and OS, except Safari PC.

Information

According to w3c.org we should all be laying out our pages this way. Tables are a thing of the past and should be used only for tabular information.
I carried out an exercise a while back, converting phpBB from it's famous tabular format to just divs. It can be done, but it's not easy.

This is the problem at the moment, all we have is div (floating, relative, absolute and fixed) and they don't perform in the way we would like. Look at all the attempts to create the perfect header/three column/footer layout with the columns all the same size. Simple...you would have thought so, a piece of cake for tables, so why not for divs.

Perhaps we are looking at layouts to copy tables, when we should be looking at layouts to do things that tables can't do.

Perhaps we should be getting away from three columns (they all look the same anyway) and should be looking for something more exciting.....and that is what this section is about. I hope to find layouts that are a bit more adventurous. 'Hope' being the right word as I haven't started looking yet but will see what I can find OR come up with myself.


Most of my demonstrations can be used without asking for permission. However, some will require email approval first. Just check each page for the copyright requirements before use.

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.

Support CSSPLAY

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.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page