Nah, I quite like this site :)

Well, I think it would be pretty amazing if we managed to publish 24 articles that appeal directly to each of the many thousands of people following this site. It’s only natural that different subject matters and ideas pique the interest of different individuals.

If you liked the Ajax article more than the markup and CSS-based ideas, you’ll be pleased to know that there’s similarly themed content coming soon. We’ll be mixing it up all month. Hopefully there’s something for everyone.

I stand by this article. It’s a great tip encouraging adoption of a best-practise development technique. Believe it or not, this is something that a lot of folk out there aren’t doing yet and could benefit from. If it’s not for you, no sweat, there’ll be something new tomorrow :)

Thanks for stopping by.

Hey guys -stop grumbling, please!

The first article was the most interesting ‘til now, okay. But is anyone of you able to write such an article 24 times? I will come back tomorrow for sure -although the last 2 days didn’t bring me really new informations. Drew is right, there are lots of people outside not using similar layouts/templates.. And hopefully some of them will read this article :)

I have liked all the articles that have been here so far. Great job. To the comment made concerning scrolling through the content to see navigation or having nav at the top

Employ a link in the navigation that is an anchor link that says “skip navigation” using CSS change it’s display to none. When CSS is turned off, the user is presented the option of clicking a link to skip down past the navigation

Using templates to avoid reinventing wheels is good practice, and we all do it, but Rachel has shown us how to make a good job of a vanilla flavour template. Designing for simplicity has to start at the foundations … thanks Rachel.

The 24 ways idea is good fun, and very much in the seasonal spirit of giving and sharing, so I’m a fan!

This guys have already done something similar http://particletree.com/features/quick-start-your-design-with-xhtml-templates/

But more doesn’t hurt.

Good job

Cheers.

Great tutorial. I don’t see why everyone grumbling. I already know how to make layouts with CSS, but I also know there are multiple ways of going about it. It is interesting to see how others go about and I think your tutorial is great. This site is to help someone learn, and well, I am sure we are not all CSS guru’s :) Keep up the great work. Loving every article so far and am excited for the rest.

Well, I must admit, it’s not impressive or anything. But as Rachel explained, it does serve it’s purpose. The more advanced designer might not need this, but that’s no reason to make a big fuss about it! It’s great that someone is writing about stuff that the people wanting to learn will understand!

I agree with Brian (and any others that are thinking along the same lines). This is what we need, if we really want webstandard based design to be big. All that complicated stuff is very confusing and demotivating for people that haven’t yet learned the basics of design.

Excellent tutorial, love it! So all you negative nancies shut up!!

Despite Freddy’s last remark:

Drew McLellan: I of course never expected all 24 articles to appeal to me, nor anybody else. In fact I already knew the things that were written in the second article, I’m probably never gonna use the suggestion in the third article, and I knew how to do the things explained in the first article, though without using the Prototype framework (never heard of it before, but it does seem nice, and I’ll surely look into it sometime). But I didn’t ‘complain’ about any of those, as I thought they were all relevant to—what I believed was this site’s purpose.

Saying an article “states the obvious” is in itself naturally not a compliment, but it doesn’t necessarily mean it’s a critique either though; I’ve read many great things which does just that. And I don’t think this was a bad one either. I just didn’t expect the articles on this site to be like that, given it’s sub-heading.

But it seems the suggestion in this article wasn’t as obvious to your readers, as I thought it would be. And it could seem many of them both liked the article, and that it was exactly such they hoped and/or expected to find here. So peace be with it, and after all it is also your site, and hence your decision what should be published on it. :-D

No doubt I’ll be back again tomorrow.

I just re-read my earlier message and realised that it sounded more harsh than it was intended to be. You guys are providing this information for free and here I am bitching. I’m sorry, Rachel. I also realise that there are many who would find this template-driven approach to be an eye-opener, so for them it’s useful.

I think the biggest problem was that you set the bar so high with your first article, Drew!

Sorry for such a rude message, I didn’t want to offend anyone… You do a great job, guys, really thank you for that.

It’s just wrong that recent articles do not fit the name and the tagline of the website absolutely, and it’s not a matter of topic (CSS or AJAX). They do help to develop, but do not give visible results to friends whom the reader wants to impress.

Keep up with the great articles guys. Sure, there’s nothing new to me in these articles, but I remember when I was just starting out, and a resource like this would have made things a lot easier. It’s not so much the “nuts and bolts”, but the little tips and tricks that make things easier in the long run. Besides, I enjoy the read. It’s good to reinforce the basics.

XHTML and Pixel based CSS?

You should be using HTML4 and no pixels.

Always nice to go back to the basics and find your roots.

Nice, thanks.

where there seems to be 3 superfluous div-elements…

I like the article. But it lacks of some explanation about why the chosen layout and those “3 superfluos div-elements”.

I think I know why they arent superflous: there is an “axiom” that says: “Don’t use any padding and margin on main layout elements”.

If you apply margins and paddings to main layout elements, it’s probably your layout will break in many ways (I have suffered it).

Regarding navigation, sidebar/content/footer works great when another best practice is used: the first link to the navigation should be Skip to Content. This helps the site meet Section 508 ADA requirements as well as helps those visiting the site without the CSS. Of course, for normal CSS view, that skip link should be hidden via CSS.

Maniqui: An “axiom” even!? I don’t think I’ve experienced problems with it, nor in fact ever heard about it before; can you please direct me to a few ressources where it’s stated, or just simply discussed? Or do you still have a testcase or an example of the problem(s) you’ve experienced?

@Allan Rasmussen: If you lay out the main structural components of your site with specific dimensions, and then apply either padding, margins or borders to them, you’re immediately caught out by the broken box model in earlier versions of Internet Explorer. This leads you down the path of setting up special styles using the various Box Model Hacks, and all the potential long-term maintenance problems that come from them.

By instead applying the necessary spacing to the elements within the dimensioned elements, you avoid this problem.

(You could have a look around the CSS Discuss Wiki, linked in the final sentence of Rachel’s article, for more info on these matters, if you need it.)

@Allan:

I have read that “axiom” in this article by Chris Heilmann.

I had this eureka moment several monts ago and decided to make six common layouts. I generally use a combination of CSS HTML and PHP for most websites I build. I have created neat, clean templates and set the div element to have a grey background, black border and 1px margin all around so I can see the layout in the browser and then I make changes from there.

I have made some improvements in efficiency and have cleaned up some of the HTML and PHP and will further improve these when I have time but if you don’t have to rebuild the whole thing every time it is easy and I can spend more time on the project or more time on the golf course.

Nick Fitzsimons: Ah yes. But honestly, I don’t care about IE < v.6, trying to support any of them would simply seem like a waste of time for me (though I still do see even IE4-visitors on some sites I've made), especially considering IE7 is on its way now. In fact I'd prefer using fewer div-elements, than doing the opposite just to make a site look nicer in those old browsers; people using them should really upgrade, and keep supporting them is not the way to make people do it.

Of course, if I were designing say microsoft.com or google.com, I’d have a different view on that. But that’s not likely to be the case, for some years to come at least. :-)

Manique: Thanks.

I have been thinking about this article, and it’s a brilliant idea!

But if you are a user of Dreamweaver, they have already provided a number of layout templates for us CSS designers to tweak away at.

So, unless we are after something technically superior, there seems to be no need to create a library of our own. Unless it is to use our own ‘semantic’ code for the markup.

I believe these 2 rules:

#content .inner {}

#side .inner {}

could be replaced with:

.inner {}

after adding the padding-top declaration to

#footer .inner {}

Also, rather than using these extra DIVs, I’d move the horizontal padding to the nested block-level elements and move the vertical padding back to the parent containers (content, side, footer).

And if we’re talking starting points, I’d zero out margin and padding:

* {margin:0;padding:0}

And take care of the “small text size bug” (IEWin):

html {font-size:100.01%}

I agree, there’s a whole bunch of peeps here totally missing the point, not every article here at 24 ways has to be aimed at the total geek.

Anyhooo, I thought I’d add my own tip.

If you want to ease the pain when you’re starting out with a fresh new site try a bit of undohtml.css.

I love your project, it’s rare to find tutorials that take it all back to basics again, and gathers the most interesting stuff in one place. Usually when searching google for tips on a problem I get so many misses and just posts where desparate newbies like me are shouting in the forrest (ok, I’ve been doing this stuff for 12 years, but hey, every day brings a new challenge).

Keep doing your stuff 24ways, and to the whining maggots: please use the comment to prune and post urls to better examples, or shut up, you are just creating noise I have to read to get to the good stuff.

If you have the time, some xml parsing is allways good, there a million ways to do it, and most of them suck. Any heads up and that subject is allways interesting.

(And that will be my last off topic post :)

I’d like to point out that the exact same CSS layout could be used in an HTML document (since you don’t style the HTML element) properly served as text/html instead of an XHTML document improperly served as text/html.

I know some think that XHTML served as text/html is a good thing. I just don’t.

That said I really appreciate this article and others on 24 ways.

Watch out for vertical margin collapsing when nesting block level elements. For example, #footer .inner {margin:10px;} only renders horizontal margins. Vertical margins have been collapsed with container’s margins. In this instance margin:10px; is equivalent to margin:0 10px;. If this was the desired effect, then that’s fine. In any case, just wanted to point that out for the newbies’ sake. By the way, put a padding:1px 0; or border:1px solid red; border-width:1px 0; on the container (#footer) and see the difference.

The only article to help impress friends with great web development results was the first one. The others are just dull, lame and boring.

This website had a wonderful start and now I’m disappointed to the point that I just do not want to read it. Many others do too, it seems.

I only read some of the comments, but I think some readers are missing the point: what I think is great about this article is understanding how to think about structure and formatting before you start coding.

I’ve been doing server side dev for some years now, and planning before coding is a very common practice. Doing it “cowboy style” is a good formula to end up with broken code or (maybe worse) difficult to maintain CSS.

Try working on someone else’s project where no consideration was given to these factors and you’ll quickly see why I think this article has a lot of value.

Keep it up!

With CSS off, it’s easier to navigate without having to dig through the content to find the navigation or search in side/content/footer.

I think think the article fits into the ambitions of this Advent Calendar. I appreciate the link to the css-discuss wiki.

One of the struggles is to get a somewhat standardized page structure. If we replace a lot of table-based webapps with a variety of different css-based webapps each with different id and class names, it seems like we will get another, perhaps even more inscrutable body of code. I think it would be a good thing to have a standardized page structure that can be communicated to developers as the basis for their work.

I have considered imposing some well-know page structure like that of MovableType as a standard way of breaking down pages, but I have to admit I have not yet seen much thought on the subject of what the best practices are. Given the amount of time I see go into CSS, I think it is non-trivial to find a page structure that could serve well for graphics designers and web developers alike. I guess it is the “CSS Zen Garden” problem applied to more everyday websites.

I don’t think that the order “side/content/footer” is the right choice… I’d prefer “content/side/footer”

“With CSS off, it’s easier to navigate without having to dig through the content to find the navigation or search in side/content/footer.”

But annoying to have the navigation at the top, if you are mainly interested in the content. So I prefer: link to navigation, search, content, navigation(, footer).

And with all due respect, knowledge of what this entry advices can hardly impress anyone; it’s simply stating the obvious, and then showing an example, where there seems to be 3 superfluous div-elements…

Standard development practice != “impressive”. Sorry.