Layouts

Cross browser FIXED
Fixed header and footer, scrolling content.
Simple minimum width layout
A layout to demonstrate min-width in Internet Explorer.
100% 'background' image
Adding an image in the background that resizes when the window resizes.
100% 'background' image - CSS3 » 28-07-2010
Adding an image in the background that resizes when the window resizes using CSS3.
Back to BASICS
The bare essentials of Layout 3.
Back to BASICS 2
The bare essentials of Layout 2.
Semi-fixed footer » 28-11-2008
A semi-fluid layout with a semi-fixed footer.
A two column equal height layout » 16-11-2010
A two column 50/50 split layout with equal height and background images
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.
3 column layouts - 7 variations » 04-02-2009
A set of 7 variations on the 3 column layout theme. All equal heights.
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 3
Full width and height. Fixed header, footer and left navigation with content scrollbar.
'Fixed' layout version 4
Full height, fixed header and footer, multiple scrolling columns.
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.
Basic flexbox layout » 05-03-2014
Back to the very basic code and style to produce a three column, header, sticky footer using flexbox
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.
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.
A responsive single page website » 05-09-2014
A simple css and jQuery responsive single page website with slanted sections and smooth scrolling navigation.
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.

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.



Copyright

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.


Latest Demonstrations

Layouts
A second responsive single page website » 15-09-2014A simple css and jQuery responsive single page website with wavy sections and smooth scrolling navigation.
A responsive single page website » 05-09-2014A simple css and jQuery responsive single page website with slanted sections and smooth scrolling navigation.
Responsive full screen vertical slideshow » 26-08-2014A simple css and jQuery responsive vertical scrolling slideshow for all modern browsers and OS.
Responsive 'horizontal blinds' layout » 10-08-2014A CSS only responsive horizontal blinds with information panels suitable for all the latest browsers and OS.
Responsive 'vertical blinds' layout » 06-08-2014A second basic 'curtains' layout this time working in the opposite direction. Suitable for all browsers and OS.
Responsive 'curtains' layout » 04-08-2014A basic 'curtains' layout where page sections stop scrolling when viewed and content below overlaps. Suitable for all browsers and OS.
Basic flexbox layout » 05-03-2014Back to the very basic code and style to produce a three column, header, sticky footer using flexbox
Flexbox layout » 03-03-2014A layout using the latest Flexbox styling to have three columns, header, sticky footer and responsive styling.
A responsive layout » 01-05-2013A reponsive layout with animated repositioning.
A two column equal height layout » 16-11-2010A two column 50/50 split layout with equal height and background images
100% 'background' image - CSS3 » 28-07-2010Adding an image in the background that resizes when the window resizes using CSS3.
3 columns - 7 variations - 04-02-2009A set of 7 variations on the 3 column layout theme. All equal heights with no images.
Fluid Layout - 02-02-2009A Fluid layout with max/min width, header/footer and all columns reach footer, NO images.
Semi-fixed footer - 28-11-2008A semi-fluid layout with a semi-fixed footer.

Please Support CSS play

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