CSS Template Layouts
The following CSS template cheats have been tested in all browsers and provide an excellent starting point for a wide range of CSS layouts. To view demos of the CSS templates, click on an image to open the layout in a new window.
To download, click the “View Source” link at the top of each template - Enjoy!
1 Box - Fixed
2 Box - Fixed
3 Box - Fixed
4 Box - Fixed
1 Box - Centered
2 Box - Centered
3 Box - Centered
4 Box - Centered
1 Box - Fluid
2 Box - Fluid
3 Box - Fluid
4 Box - Fluid
Based on my belief that information should be freely accessible by all people, permission is granted to copy, distribute and/or modify these CSS layouts. However, due to the time and effort spent in producing this demonstration I politely ask that you respect my work and give credit where credit is due. If you are using this on a personal website, please add a link back to zacheos and retain the authorship comment in the stylesheet. If you are using this on a commercial website, or for a paying job, I ask that you consider making a donation to show your appreciation.
Related Posts
June 26, 2008 @ 5:26 am
nice. Your copyright comment sounds an awful lot like a Commercial Commons By-Sa (not sure about your commercial criterion, though).
[Reply]
zacheos
You are right… I decided to remove the copyright all together. Do with these templates as you desire. Also, be sure to check back to this page often as I am going to be adding a bunch more layouts as time permits.
[Reply]
June 26, 2008 @ 5:50 am
—> in my del.icio.us bookmarks
May be just add a “download source” button on each example.
(yes , i know Ctrl+U do the job …..)
[Reply]
zacheos
Good idea… I have added a link to the templates.
[Reply]
June 26, 2008 @ 5:10 pm
You know, I see the same CSS helpful guides so often. Noone ever addresses how to do these kind of CSS quick guides that actually handle when you don’t have control over the entire real estate of a page. What if I want to have a version of 3, but within the framework of something already being on the top and left side?
[Reply]
zacheos
I am going to do a web development tutorial soon that will walk you though the design of a template from scratch… Stay tuned…
[Reply]
June 26, 2008 @ 7:17 pm
Tks for the work. I’d reco that fluid layouts have minimum widths so the columns don’t collapse on each other whenthe browser is resized.
[Reply]
zacheos
Good point… I will ad some min-widths to the fluid layouts shortly. Thanks for the recommendation.
[Reply]
June 29, 2008 @ 6:10 pm
Much love, these are awesome and incredibly helpful. The css is clean and easy to work with!
[Reply]
zacheos
Glad to hear this! I am really happy there has been such a great response to these templates. I will be adding much more as time permits. (I am currently working on a new WordPress template that will begin the Freebies section of this site - keep checking back).
[Reply]
June 29, 2008 @ 6:32 pm
[...] http://www.zachgraeve.com/css-cheats/ [...]
July 8, 2008 @ 6:20 am
I’m a little disheartened by how these boxes handle long strings. For example, when I paste a link (e.g. http://www.zachgraeve.com/css-cheats/) into one of the smaller secondary and tertiary boxes, the text exceeds the container. I would be more excited about this if I saw the example with proof that it can handle real data.
[Reply]
zacheos
To compensate for this you can create a scrolling DIV or force the long line to cut off by using an “overflow” in the style sheet.
For more information on the overflow property visit W3Schools.
I generally just avoid using long strings by using a link instead of a URL.
[Reply]
Jennifer C
Zacheos,
Normally I would agree with you, as I would loathe to see such a long string in that instance. However, in building my layout for use with a content management system, I have seen how users manage to find crazy ways like uber-length strings to disrupt everything.
I appreciate the layouts that you have created. Merely, for greater plug-and-play usability, I was hoping to see that sort of handling already implemented. It is no matter, but it would be frustrating for a newbie developer (which would likely be the ones using these sorts of templates) to see that issue and they likely would not quickly be able to realize the quick fix as you and I could.
[Reply]
August 12, 2008 @ 11:33 am
Hello Design Float… Welcome to my site!
[Reply]
August 13, 2008 @ 1:58 pm
One thing that might be nice … any template with a footer. ALA has articles, but if you’re going to be all inclusive as far as general format …
[Reply]
September 11, 2008 @ 8:49 am
[...] CSS Layout Cheats (tags: layout) [...]