skip to content

List of Layouts

Layouts
Three columns
Two simple methods of producing a three column layout with header and footer.
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 only scrollbar.
'Fixed' layout version 4
Full height, fixed header and footer, multiple scrolling columns.


Layouts
Back to BASICS
The bare essentials of Layout 3.
Back to BASICS 2
The bare essentials of Layout 2.
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.

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.


Recommended Sites

CSSplay web design/assistance

"The citroen.co.uk web site uses
CSS Play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."

Damon Clark - Brandwidth


Advertise with CSSplay

CSS play pages

CSS (Design) - TOP.ORG

CSS play recommend

Free, practical CSS menus, layouts, and examplesSitegrinderPSD to HTML