Saturday 04 February 2012

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



  • http://el-padawan.blogspot.com/ fiftywan

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

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

  • Benoit Guérout

    —> 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

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

  • JD

    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

      I am going to do a web development tutorial soon that will walk you though the design of a template from scratch… Stay tuned…

  • http://www.diyanswerguy.com Michael

    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

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

  • Bradley Woods

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

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

  • Pingback: B豚の備忘録 - CSSレイアウトのチート集12

  • http://blog.neatlysliced.com Jennifer C

    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

      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.

      • http://blog.neatlysliced.com 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.

  • zacheos

    Hello Design Float… Welcome to my site!

  • headhurt

    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 …

  • Pingback: links for 2008-07-02

  • Kitty

    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

      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!

  • Julianne

    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

      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

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

        • zacheos

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

  • Pingback: tomlovesyou | CSS Layouts

  • http://laranzjoe.blogspot.com lawrence77

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

  • Pingback: The Ulitimate List of Cheat Sheets for a Developer / Designer!!! | James W Lane

  • Pingback: 我想网 » Blog Archive » CSS 布局参考大全

  • http://brisbane.at9t.com/ 布里斯班

    Great article for designing.
    Thanks for sharing.

  • Shayman

    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

  • Pingback: The Ultimate List of Cheat Sheets for a Developer / Designer!!! « James W Lane

  • http://www.snel-geld-lenen.info/ geld lenen

    Bookmarked! can become handy for quick website development..

  • http://kirlian.org kirlian photography

    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.

  • http://www.saheltech.com CSS Web design

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

  • Fhy

    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 */}

  • http://www.unwiredwebsolutions.com/ontario-waterloo-web-design.php Lawrence Spring

    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! =)

    • http://www.facebook.com/zachgraeve Zach Graeve

      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.

Powered by WordPress | Privacy Policy | Web Design Miami