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. 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.
This template is free, open-source, following only the Creative Commons Attribution 2.5 license.
Feel free to go to the main page for it and download the layout (you can choose between the original tutorial version or the enhance layout for a public template). Remember to save the images used also.
I hope you enjoy it!
~Nicole
I really like the color scheme you have with this. I would like to make this a fix size instead of a flex. I have tried with no success. Your help would greatly be appreciated. Thank you
Scott