About This Design

This design was created from a tutorial I wrote on my blog. I found an inspiration design screenshot I liked, and worked up a table-less layout that resembled it.

The left column is a fixed 230px, and the content area is fully flexible to expand and fill the rest of the page. All fonts will increase appropriately because all are set relative using the base at the 76% universal sizing.

Four images are used in the layout, totaling only 5.28k. However, the one image (the orange one in the top corner) is 5k on it's own. No 'hacks' are used in the design, but the faux column technique is employed to make sure that the columns always appear equal length.

This website is XHTML 1.0 Strict and has been tested in Firefox, IE 6 and IE 7 Beta 2, Opera, Konqueror, and Safari. I suggest that if you have any problems using this template, you first read through the tutorial I wrote making this template from scratch. If you need further help, feel free to contact me, or post your question on the original template release post. Note: I did make a change or two to the colors (and added the extra styles you see in the content area here) but otherwise the template is the same as the tutorial.

Read More...

Useage

I am freeing this template according to the Creative Commons Attribution 2.5 License. That license gives you the right to use this template in any way (commercial or non-commercial), make changes to it, create things based on it, etc... so long as an attribution is made to the author. Per this, please leave the link at the bottom of the footer to my site, though you are free to change the text of that link (such as, 'Based on a design by', etc..) to suit your needs. You can also, alternatively, put a link in your 'About' page or other page as appropriate.

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

This is normal paragraph text. This is normal paragraph text. This is normal paragraph text. This is normal paragraph text. This is normal paragraph text. This is normal paragraph text. This is normal paragraph text.

This is a normal link.

An acronym

Some text here that is code.

A blockquote.

Table Heading
Col 1 Col 2 Col 3
Sub head 1 Result 1 Result 2
Sub head 2 Result 1 Result 2
Sub head 3 Result 1 Result 2