digg

Facebook Connect Join Digg About

The only CSS layout you need(?)

strictlycss.com — Despite the flexibility in CSS, you have maybe experienced that the CSS layout you normally use didn't handle a specific case so you still had to edit, or perhaps totally restructure your HTML? This article presents nine different layouts without using absolute positioning (with example pages), all based on the same HTML.

Who dugg this? Made popular Sep 17, 2006

Digg DudeWhat is Digg?

Digg is a place for people to discover and share content from anywhere on the web. Digg surfaces the best stuff as submitted and voted on by the community. Take the Tour to learn more.

36 Comments

show profanity settings
expand all
  • TheSevenDuffs, on 10/12/2007, -9/+81your mother's a whore?
  • JimmyLin, on 10/12/2007, -2/+15I have 9 free layouts on my website, http://www.jimmylin.info/templates.html

    They, too, use the same HTML but just change the CSS. It's slightly different than the layouts offered here though.

    Edit: no CSS hacks of any kind either. 100% valid css/xhtml :)
  • lithiumdave, on 10/12/2007, -0/+8Or just go here instead: http://blog.html.it/layoutgala/

    40 layouts. I've used pretty much all of them for one project or another, absolutely brilliant. Same semantic, well-structured HTML for each one too.
  • inactive, on 10/12/2007, -0/+7Bury, innacurate. The CSS is pretty sloppy especially with the * html IE hacks- there are concrete ways of two or three column layouts. There aren't even shorthand css statements where there could be. Also I think using position: is just bad.
  • david76, on 10/12/2007, -0/+5Unfortunately, most people don't use the proper doctype (HTML 4.01 Strict, or XHTML) to get consistent rendering across modern browsers, including IE6.
  • JimmyLin, on 10/12/2007, -0/+3Oh, sorry, only 8 free layouts. Also they're completely compatible with IE5.0+, FireFox 1.5, Opera 8.5, and Safari 2
  • kalmi, on 10/12/2007, -1/+4They will...(in three years...)
  • sembetu, on 10/12/2007, -1/+4/rant

    Yes, the subtle issue of freedom does't really matter, does it? I mean CSS Zen Garden is a great place for inspiration, but... thos designs come with all this proprietary, I own it, ask me for permission, crap. I am going to edit anyway, but just the thought that someone could come behind you and say, "Ah, ah, ah... that's mine, take it down!" Makes me a little irritated.

    /end rant
  • christocracy, on 10/12/2007, -0/+3oh man, I'm such an idiot. I don't know to for a hyperlink in Digg.
    http://developer.yahoo.com/yui/grids/
  • EricJD, on 10/12/2007, -1/+3nice.
  • CraigJ, on 10/12/2007, -1/+3@cakestick: Seen the video, seen the show. I get it. really. That was me being sarcastic. Sorry you didn't get it, I'll try to be more ADA compliant in the future. Oh, and thanks for the link that was just 2 posts up. I could never have found it without your help.

  • CrackHappy, on 10/12/2007, -0/+1Jimmy - thanks for providing those templates. Did you know that you have some links that don't work? i.e. "Why I am a pixel perfectionist"...
  • Alexx3k, on 10/12/2007, -3/+4hnmm, it's nothing that http://www.csszengarden.com/ hasn't been doing for years - all the layouts are just different css. Though at least this site has nice simple examples that you can just rework into your own designs I guess.
  • CrackHappy, on 10/12/2007, -0/+1That's a great site, and I think I'm definitely going to use some of those layouts.

    That said, I just about spit Coke all over my monitor here at work when reading the actual text that makes up the columns.... I don't know why but I just get the mental picture of some guy happily typing that stuff out grinning the whole time.
  • cyroxos, on 10/12/2007, -0/+1My own personal CSS layout takes advantage of 3 column full-screen span, and header image centering.

    http://www.cyroxos.net/hosted/tutorials/CSS%20Alignment/example6.htm
  • CraigJ, on 10/12/2007, -2/+3Not the only layout you need, but fairly useful as a reference. CSS is really cool, and what I use as a primary layout tool instead of tables, but there are a few things I'd like to see them add to the spec. Oh, and when I need to create pages that work in Firefox, Opera, Safari AND i.e. 6, sometimes I have to use a table cause it doesn't always work in IE6.

    Here's hoping that every ie6 user upgrades to ie7 the day it goes gold.
  • christocracy, on 10/12/2007, -4/+5I've tried my fair share of css alchemy. my life has been eased by Yahoo's "grids" library, a part of Yahoo's open-sourced clientside javascript & css framework.

    Yahoo Grids

    the framework is wonderfully elegant and is said to "strike a nice balance between doing too much and not doing enough".

    and most importantly, the documentation excellent.
  • CraigJ, on 10/12/2007, -0/+1Absolute positioning can get messy, true. Relative and float work quite well, but there are still a few limitations
  • inactive, on 10/12/2007, -1/+2Because when doing CSS markup, it should be done in such a way that it just works 99.9% of the time, sans the occassional one-off error with IE. Doing abs/relative positioning can get messy fast
  • SteaminTmann, on 10/12/2007, -0/+1One thing I learned, is using positioning (a combo of absolute and relative), can help a great deal when it comes to layouts, especially when concerning Divs. It seems to work relatively well, especially when cross-browser compatibility is concerned.
  • kjhatch, on 10/12/2007, -0/+1Exactly. Fulciniti has already done the columned layout work, and the Layout Gala code is much better.
  • tempusrob, on 10/12/2007, -2/+2"Also I think using position: is just bad."

    Uh ... why?
  • SenyWD, on 02/24/2009, -0/+0Download free standards compliant CSS layouts: http://www.free-css-layouts.com
  • jetsetter, on 10/12/2007, -2/+2Good work mentioning this. Yes, I would suspect someone looking for a standardized CSS solution to layout would want to go with Yahoo's library. It is well supported with documentation and obviously standards compliant. You can be assured it will be revised with instructions for upgrading as new browsers are introduced.
  • jccalhoun, on 10/12/2007, -1/+1I can't stand the non-fluid content that doesn't change the text width with the width of the browser. That's why A List Part's "Holy Grail" layout is ideal for me. http://www.alistapart.com/articles/holygrail/
  • inactive, on 10/12/2007, -1/+1"we're still better off than if this had been built with tables."

    How do you read that as the author discrediting himself? He's saying that even with all the possibly extraneous crap he threw into the HTML to give designers maximum flexibility, it's STILL better and clearer than using tables to effect the overall page layout.

    He's bolstering his argument, not discrediting it. I wouldn't say that tables are never appropriate, nor do I think he would either -- they have specific intended purposes, and whole-page layout is not one of them.
  • christocracy, on 10/12/2007, -0/+0yui is fantastically documented and easy to implement. as a web-developer, I have plenty of other area to worry about, like my javascript framework, my application mvc framework, database orm framework, the cms... the last thing you want is to be bogged down with css crap.

    the yui framework does indeed decrease browser incompatibilities and allows to spend more time where the money is: in the application itself.
  • inactive, on 10/12/2007, -4/+2I looked at that site and they have this comment in their source:

    "However, I think we can all agree that even given that, we're still better off than if this had been built with tables."

    What the *****? Way to discredit what you're doing on the website right off the bat! If you don't believe what you are doing is effective, why should I continue going to your site to see, what people say, is cutting edge CSS?
  • Natcon67, on 10/12/2007, -2/+0This site has over 40 layouts that are free: http://shabadeehoob.com/2006/09/18/quick-link-every-css-based-layout-you-could-want/
  • ohhhL3ThaL, on 10/12/2007, -3/+1You're the man now dog?
  • Bloodwine, on 10/12/2007, -4/+1Disclaimer: I go to websites for the content, not the visuals, and I prefer cleaner, simpler layouts.

    With that being said, I find most tableless CSS layouts to be rather bland, boring, and rudimentary in the style and layout. Seriously, it's like we're revisiting the geocities era of webdesign, but without the bloodbars and under construction gifs. Sure the designs might validate and be accessible, but they are plain.
  • compu73rg33k, on 10/12/2007, -8/+3"your mother's a whore?"
    I'm not saying your mother's a whore, I'm just asking!
  • lupinglade, on 10/12/2007, -6/+1Ooh wee. Need more AJAX. haha. No.
  • honkimon, on 10/12/2007, -8/+1Cool another ***** dupe...

    http://digg.com/search?area=all&age=all&sort=new&s=css+grail&submit=Search

    moron, do a quick search before you post *****
  • cakestick, on 10/12/2007, -14/+1CraigJ: http://digg.com/videos_comedy/The_Daily_Show_w_Jon_Stewart_Media_s_use_of

    WTFV
  • CraigJ, on 10/12/2007, -19/+5nice. really.

  • Add a Comment

    Login or register to comment!
    Or, sign-in super fast with your Facebook account ...


© Digg Inc. 2009 — Content created and posted by Digg users is dedicated to the public domain | Terms of Use Updated | Privacy Policy
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.