- 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
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
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
Adding an image in the background that resizes when the window resizes using CSS3.
- A two column equal height layout
A two column 50/50 split layout with equal height and background images
- 3 column layouts - 7 variations
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
A Fluid layout with max/min width, header/footer and all columns reach footer.
- Flexbox layout
A layout using the latest Flexbox styling to have three columns, header, sticky footer and responsive styling.
- A responsive single page website
A simple css and jQuery responsive single page website with slanted sections and smooth scrolling navigation.
- Responsive 'vertical blinds' layout
A second basic 'curtains' layout this time working in the opposite direction. Suitable for all browsers and OS.
- Responsive 'horizontal blinds' layout
A CSS only responsive horizontal blinds with information panels suitable for all the latest browsers and OS.
- Responsive full screen vertical slideshow
A simple css and jQuery responsive vertical scrolling slideshow for all modern browsers and OS.
- Responsive 'curtains' layout
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
A simple css and jQuery responsive single page website with wavy sections and smooth scrolling navigation.
- An experimental layout using viewport
An experimental layout using css and viewport, buggy in Opera, fails in Safari PC
- A second experimental layout using viewport
A second experimental layout using css and viewport, for all the latest browsers and OS, except Safari PC.
- Another experimental layout using viewport
Another experimental 3x3 grid layout using css and viewport, for all the latest browsers and OS, except Safari PC.
- A simple CSS ONLY modal windows template
A simple CSS ONLY template for modal windows, fullscreen, slide in and push in. Suitable for all modern browsers.
- A CSS scroll snap points layout
A layout using 'scroll snap points' to scroll the page one screen at a time.
- A second CSS scroll snap points layout
Another layout using 'scroll snap points' to scroll the page one screen at a time. This one is a 3 x 3 grid.
- A 'flexbox' layout
A layout showing the power of 'flexbox' to producing responsive tempates.
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.