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.
nice. Your copyright comment sounds an awful lot like a Commercial Commons By-Sa (not sure about your commercial criterion, though).
Comment by fiftywan — June 26, 2008 @ 5:26 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 …..)
Comment by Benoit Guérout — June 26, 2008 @ 5:50 am
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?
Comment by JD — June 26, 2008 @ 5:10 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.
Comment by Michael — June 26, 2008 @ 7:17 pm
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.
Comment by zacheos — June 28, 2008 @ 7:20 am
Good idea… I have added a link to the templates.
Comment by zacheos — June 28, 2008 @ 7:21 am
Good point… I will ad some min-widths to the fluid layouts shortly. Thanks for the recommendation.
Comment by zacheos — June 28, 2008 @ 7:21 am
I am going to do a web development tutorial soon that will walk you though the design of a template from scratch… Stay tuned…
Comment by zacheos — June 28, 2008 @ 7:22 am
Much love, these are awesome and incredibly helpful. The css is clean and easy to work with!
Comment by Bradley Woods — June 29, 2008 @ 6:10 pm
[...] http://www.zachgraeve.com/css-cheats/ [...]
Pingback by B豚の備忘録 - CSSレイアウトのチート集12 — June 29, 2008 @ 6:32 pm
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).
Comment by zacheos — June 30, 2008 @ 6:28 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.
Comment by Jennifer C — July 8, 2008 @ 6:20 am
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.
Comment by zacheos — July 8, 2008 @ 2:16 pm
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.
Comment by Jennifer C — July 8, 2008 @ 4:03 pm
Hello Design Float… Welcome to my site!
Comment by zacheos — August 12, 2008 @ 11:33 am
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 …
Comment by headhurt — August 13, 2008 @ 1:58 pm
[...] CSS Layout Cheats (tags: layout) [...]
Pingback by links for 2008-07-02 — September 11, 2008 @ 8:49 am
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.
Comment by Kitty — December 7, 2008 @ 7:35 pm
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!
Comment by zacheos — December 7, 2008 @ 8:26 pm
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.
Comment by Julianne — December 15, 2008 @ 10:25 am
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.
Comment by zacheos — December 16, 2008 @ 9:54 am
[...] following CSS template cheats have been tested in all browsers and provide an excellent starting point for a wide range of CSS [...]
Pingback by tomlovesyou | CSS Layouts — February 22, 2009 @ 8:59 am
thank you very very much!
i like it!!
soon i’m going to try myself some CSS using this!!
Comment by lawrence77 — February 23, 2009 @ 6:21 am
[...] CSS template layout cheats by Zach Graeve (Visit Here) [...]
Pingback by The Ulitimate List of Cheat Sheets for a Developer / Designer!!! | James W Lane — March 9, 2009 @ 1:33 pm
[...] 来自: zachgraeve.com [...]
Pingback by 我想网 » Blog Archive » CSS 布局参考大全 — March 31, 2009 @ 8:25 am
Great article for designing.
Thanks for sharing.
Comment by 布里斯班 — April 29, 2009 @ 6:56 pm
The 4 box fixed source doesnt want to load for some reason, just get a page error.
Comment by Travis — June 4, 2009 @ 8:53 am
It is working for me… Not sure what could be wrong.
Comment by zacheos — June 4, 2009 @ 10:37 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
Comment by Shayman — August 9, 2009 @ 9:58 am
[...] CSS template layout cheats by Zach Graeve (Visit Here) [...]
Pingback by The Ultimate List of Cheat Sheets for a Developer / Designer!!! « James W Lane — May 26, 2010 @ 7:06 pm