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.
Welcome Back!
Now is your chance to join our growing community! Be the first to know about great new articles like this one. Register for my Email Updates or RSS Feed today!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) [...]
December 7, 2008 @ 7:35 pm
Considering the odds of someone producing truly original css, and the likelihood of the web community not simply stealing it, copywritten or not, I think not reserving copyright was prudent. None of this is anything that hasn’t been taught in advertising design since long before the advent of Tex.
It would only make sense to go to lengths to protect your work if it was remotely securable. You can’t exactly obfuscate css and html.
Reply
zacheos
Hence why none of these samples carry a copyright notice. I simply ask that if people are using them that they consider giving me a link or saying thanks!
Reply
December 15, 2008 @ 10:25 am
Hi there
Please help! You don’t happen to have a cheat for a 3 column which is like the 4 column one but doesn’t have the third skinny extra right column? Or do you know where I could find one?
Thanks in advance.
Reply
zacheos
If you look carefully at the difference between the templates you should be able to figure out how to create a template with a header on any of these. If you need custom work done, let me know. I can provide you with custom templates and CSS work for fair rates.
Reply
Travis
The 4 box fixed source doesnt want to load for some reason, just get a page error.
Reply
zacheos
It is working for me… Not sure what could be wrong.
February 22, 2009 @ 8:59 am
[...] following CSS template cheats have been tested in all browsers and provide an excellent starting point for a wide range of CSS [...]
February 23, 2009 @ 6:21 am
thank you very very much!
i like it!!
soon i’m going to try myself some CSS using this!!
Reply
March 9, 2009 @ 1:33 pm
[...] CSS template layout cheats by Zach Graeve (Visit Here) [...]
March 31, 2009 @ 8:25 am
[...] 来自: zachgraeve.com [...]
April 29, 2009 @ 6:56 pm
Great article for designing.
Thanks for sharing.
Reply
August 9, 2009 @ 9:58 am
Hey
I have 3 rows of Div tags stacked, like a Header, Body, Footer type of layout that is centered. Now I want to add 3 Div’s that float over the bottom of the Header and top of the Body. They are like 3 giant graphical buttons. I can use absolute to this however when the Browser window is resized the 3 Floating Div’s do not center properly with the rest of the site. Any Ideas on how I can this?
Thanks
Reply