The total css "Ultimate" template

The capped width template of mine, that so many people are using, is a hybrid (Over 2000 websites so far, and counting). That means it uses a table to set the main page structure, with css to control and style everything else. This is my own personal preference, as the ease of modifying it more than makes up for any percieved issues there might be with using a table to define the layout (one common fallacy is that tables are harder for Search Engines, and they make the page less accessible to screen readers).

However, I get numerous requests for a pure css version. I'm not sure if people realize just how difficult that is to pull off. Sure, a template such as the ones created by a program such as Dreamweaver is easy to build. But that's not what I'm talking about.

So the design features needed are......

• *fully flexible capped width
• *NO tables, all content positioned with divs
• *columns full length, and able to modify colors and widths
• *SE friendly, main content before left column
• *Able to resize without problem
• *Look good in all browsers
• *If possible, avoid hacks, conditional comments, and/or IE specific stylesheets

A quick peek

The first one shows the page at 800x600px. Notice the whole page is visible, with no scrollbar. The second is taken using 1024x768px, and the third is 1280x1050px. The template is reacting as it should, expanding to the specified capped width of 950px, and then fixes at that width (just the same as the original capped width that some of you have got on your sites). I could set the maximum width to whatever I wanted, of course. I just happen to think 950px is a good alround width to use. Not to wide, not too narrow, just about right.

But pay particular attention to the side columns. See how they shrink or expand relative to the overall page width? And also notice that I have used a solid color for each side column: I could easily use a background image instead. And finally, pay attention to the fact the columns are equal length. Now THAT's neat! And not something you see every day.

So why call it the "Ultimate Template"?

Because it overcomes every drawback that a full css template has. If you download a free template, or decide to pay for one, the disadvantages are the same. Here are some of the faults you might find with other templates (but not with this one!).

• high code to content ratio
• content comes after the left column (not idea optimization)
• Page is either fixed width, or totally fluid
• Columns are not equal length
• Template relies on sliced images (not user friendly if you wish to change these)
• Looks good in some browsers, terrible in older ones (will not degrade gracefully)
• Uses hacks and conditional comments. I believe that you CAN have a great design without these

A bit about the Ultimate Template

This is something I have been working on for quite a while now. A bit here and there, as and when I had the time. While my hybrid template has been spectaularly successful, both with sales and results, the aim was always to give people a full css version.

I have been reluctant to release it publicly, as I have only limited time that I can give to support. I did in fact try giving a full css template away as a free bonus to template owners, back in early 2008. However, the amount of css novices that decided they would try it, ran into problems, and then tied me up with endless questions, meant that it simply wasn't worth my time to supply this - free or otherwise. And yes, I DID specifiy that there was no support given to that template. However, either people don't read the TOU, or they assume those apply to other people and not them ;-)

A bit about how it works

I won't go into detail here, just a very broad overview. For a start, let's discuss setting a capped maximum width on the template. Look at a typical 3 column css template, they often choose to set the side columns at a fixed width.

As soon as you do that, then a true capped width fluid design becomes almost impossible to achieve. You can appreciate that if the side columns remain fixed as the page is made smaller, then the relationship in sizing between the columns can never be maintained.

So there isn't a fixed width to be found in this template, it all works from percentages. Total container width, columns, divs, fonts etc, they are all set as percentages. I have always advocated using this system, and in this case you would be hard pressed to find a better way.

What about the column order?

Okay, this is a very simplified explanation of how it all works. Otherwise it would take you all day to read, and take me 2 days to write.

We stack 3 divs one on top of another. The header, content, and footer divs, all set to 100% width of the container. Inside the content div, we then have 3 more divs for left right and main content columns. Let's call them col1, col2 and col3. This is the order they appear is the source code, so we will put out main content in col1, and out nav stuff in col2.

But we want col2 to appear where col1 is, and vice versa. At least for human visitors, but NOT for spiders. So, if col1 is set to 60% width (for main content), and col2 (the nav one) is set to 20% width, we position them relatively. Col1 is moved to the right by 20% and col2 is moved to the left edge of the containing div. Col3 is left, as it's already positioned correctly.

Now the columns are in the right place (and we can color them how we like), we need margins/paddings to keep the content from the edge of the divs. But as soon as you set those, the whole structure falls to pieces (mainly because of the way IE uses padding and margins).

Solution: Don't use margins or padding. Instead, put an invisible div inside the column div, that is slightly narrower. So the width of the left column might be 20%, we can put the internal div to something like 18%, which will give a gap of 1% either side. Giving the impression of padding, without actaully using any.

By not setting any border or background color on these internal divs, the div below will show through. And as this will be full height, we get equal column lengths (the actual internal div doesn't stretch full length, but that doesn't matter, nobody sees it).

Do you want a free copy of the template to test, and try out?

This initial version is for those familiar with css to at least an intermediate level. If you are likely to find yourself getting confused with how to set up your own styling classes, then this is not for you. And if the above explanation of how it works wasn't reasonably clear (or at least the concept of it) then it DEFINITELY isn't.

The stylesheet is well commented to let you know what's in there, and how you can change column widths etc. Beyond that, there are no instructions for the template, at this point. If you mess up badly, then please don't email me asking how to fix your code. Just unzip a fresh copy of the template, and start again.

Please just email me with "Request for ultimate template" in the subject line, if you want a copy. Before doing so, you agree to a few (very simple) conditions.

• I will be limiting the number that I distribute at this point, so I do not promise you a copy
• Template is supplied "As Is" I don't guarantee anything with it
• You will not distribute the template, or any part of the zipped file, to others
• The download link I give you is to remain confidential
• I ask that you let me know of any bugs/glitches that you find