Skip to content

24 ways to impress your friends

CSS Layout Starting Points

38 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

Rachel

brikou: that would depend what you have in the columns, however that isn’t really the point – this isn’t ‘here is a perfect CSS layout’ – this is an explanation of how to approach CSS layout development to get stuff done quickly. The example is just to show what sort of things I’m talking about that you might have in that starting point. It’s a starting point for one specific type of layout.

Billy: standard development practice it may be, but every week I get folk emailing me with CSS issues and, “I just built this layout and then I realised I needed to put a footer on it and it doesn’t work” has to rank as one of the most common issues. So working in this way not only gets you to build up a bunch of timesaving starting points it also forces you to consider how the structure of the thing will work – from the outset.

Josue

Hmmm, what about Header. There are many people out there who like me use “Header/Content/Footer”. To me this makes more sense than having a “Side” section” but then, we all have out own ways and preferences.

Great article(s), i’m a fan!

Fredrik

Superfluous element isn’t wrong in terms of accessability, it might no be semantic and it does mean more code for something CSS should be able to handle (true, flexible layouts).

But usally, those superfluous elements means less code in the aftermath, since I tend to work with flexible or elastic layouts (according to w3c recommendations) and generally DOM-scripting or a lot of CSS-hacking is required for pixel precision.

Sidesection should go after the #content, in the source order at least, if it contains such an amount of links that it would be tedious to tab through, or browse through.

I’m a bit confused by the naming of elements. Most of them are named after appearance, not function.

#side might not at all be located at the #side. Another name, such as #resources (site resources) or heck, even #toolbox would be more suitable in the end. It’s self-explanatory really. Name elements after function, not visual location or appearance. This is the very reason why I would name things to .inner instead of .padding (since it might not all supply a padding attribute).

Just my 2 cents.

Drew McLellan

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.

Flo

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

Justin

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

psonic

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!

Alex Giron

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.

Brian Benzinger

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.

Freddy

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

Allan Rasmussen

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.

Billy Munge

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!

Vladimir

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.

Michael McCorry

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.

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

Sunny

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.

Allan Rasmussen

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?

Nick Fitzsimons

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

Jay Gilmore

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.

Allan Rasmussen

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.

kayloe

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.

Thierry Koblentz

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%}

Nathan Pitman

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.

Morten Skogly

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.

bart

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.

Vladimir

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.

Rob Redford

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!

Joel Patrick

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.

Allan Rasmussen

“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…

Impress us

Be friendly / use Textile