CSS Template Layouts

Home » CSS Template Layouts


Box 1 - Fixed Box 2 - Fixed Box 3 - Fixed Box 4 - Fixed Box 1 - Centered Box 2 - Centered Box 3 - Centered Box 4 - Centered Box 1 - Fluid Box 2 - Fluid Box 3 - Fluid Box 4 - Fluid



36 Comments On This Topic
  1. fiftywan posted
    June 26, 2008 at 5:26 am

    nice. Your copyright comment sounds an awful lot like a Commercial Commons By-Sa (not sure about your commercial criterion, though).

    • zacheos posted
      June 28, 2008 at 7:20 am

      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.

  2. Benoit Guérout posted
    June 26, 2008 at 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 …..)

    • zacheos posted
      June 28, 2008 at 7:21 am

      Good idea… I have added a link to the templates.

  3. JD posted
    June 26, 2008 at 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?

    • zacheos posted
      June 28, 2008 at 7:22 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…

  4. Michael posted
    June 26, 2008 at 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.

    • zacheos posted
      June 28, 2008 at 7:21 am

      Good point… I will ad some min-widths to the fluid layouts shortly. Thanks for the recommendation.

  5. Bradley Woods posted
    June 29, 2008 at 6:10 pm

    Much love, these are awesome and incredibly helpful. The css is clean and easy to work with!

    • zacheos posted
      June 30, 2008 at 6:28 am

      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).

  6. Jennifer C posted
    July 8, 2008 at 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.

    • zacheos posted
      July 8, 2008 at 2:16 pm

      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.

      • Jennifer C posted
        July 8, 2008 at 4:03 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.

  7. zacheos posted
    August 12, 2008 at 11:33 am

    Hello Design Float… Welcome to my site!

  8. headhurt posted
    August 13, 2008 at 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 …

  9. links for 2008-07-02 posted
    September 11, 2008 at 8:49 am

    [...] CSS Layout Cheats (tags: layout) [...]

  10. Kitty posted
    December 7, 2008 at 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.

    • zacheos posted
      December 7, 2008 at 8:26 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!

  11. Julianne posted
    December 15, 2008 at 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.

    • zacheos posted
      December 16, 2008 at 9:54 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.

      • Travis posted
        June 4, 2009 at 8:53 am

        The 4 box fixed source doesnt want to load for some reason, just get a page error.

        • zacheos posted
          June 4, 2009 at 10:37 am

          It is working for me… Not sure what could be wrong.

  12. tomlovesyou | CSS Layouts posted
    February 22, 2009 at 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 [...]

  13. lawrence77 posted
    February 23, 2009 at 6:21 am

    thank you very very much!
    i like it!!
    soon i’m going to try myself some CSS using this!! :)

  14. The Ulitimate List of Cheat Sheets for a Developer / Designer!!! | James W Lane posted
    March 9, 2009 at 1:33 pm

    [...] CSS template layout cheats by Zach Graeve (Visit Here) [...]

  15. 我想网 » Blog Archive » CSS 布局参考大全 posted
    March 31, 2009 at 8:25 am

    [...] 来自: zachgraeve.com [...]

  16. 布里斯班 posted
    April 29, 2009 at 6:56 pm

    Great article for designing.
    Thanks for sharing.

  17. Shayman posted
    August 9, 2009 at 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

  18. The Ultimate List of Cheat Sheets for a Developer / Designer!!! « James W Lane posted
    May 26, 2010 at 7:06 pm

    [...] CSS template layout cheats by Zach Graeve (Visit Here) [...]

  19. geld lenen posted
    July 23, 2010 at 1:59 pm

    Bookmarked! can become handy for quick website development..

  20. kirlian photography posted
    October 27, 2010 at 6:29 am

    I am not truly positive if greatest tactics cover emerged nearly stuff similar to that, other than I am positive that your big work is visibly identified. I was questioning if you offer one registration toward your RSS feeds because I would be extremely interested.

  21. CSS Web design posted
    November 28, 2010 at 8:28 am

    Thanks for important tips.
    I shall try to do it now.

  22. Fhy posted
    May 27, 2011 at 8:35 am

    cool… thanks for information. great job! a little question on syntax-problems:
    w3 validator recognized that in your source used method “heigth” is not avaible.
    sure it should be “height”, aint it??

    html>body #content_head { heigth: 120px; /* standards height reinforcement */}

  23. Lawrence Spring posted
    May 31, 2011 at 7:48 pm

    Hmm, those layouts are probably the most commonly used. I think that today, there are more layouts, I mean unimaginable layouts, that could dwell. Web designers of this generation are getting more clever and creative than before. I’d say, cheers to that! =)

    • Zach Graeve posted
      June 14, 2011 at 10:03 pm

      Completely agree! They need a pretty major overhaul. I have started working on this site again recently, so I am adding it to my list.


Leave a Reply

Connect with:

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>