In a nutshell: css code should be divided up into at least 4 separate pages:

1. page-structure.css
2. text-styles.css
3. misc.css
4. ie-styles.css

How about we call this the ‘killer’ css structure.

Before I go into the details of what each css file contains (if it’s not already obvious), I want to quickly cover WHY you might want to use this basic css structure for all your websites.

Why use the ‘killer’ css structure?

It all comes down to one of the key reasons for using css in the first place:

Grouping code so that it is easier to update and easier to understand.

-

A common mistake

What I see over and over again, are web designers who put all their css code into one css file. This is indeed a big leap forward from using font tags all over your website … but by having only one huge css file, you’ve just created another big messy file to deal with.

To the point

Page-structure.css contains only css that defines the structure of your page. That is to say things like:

- css code that sets whether the page is liquid of fixed.
- css code that sets whether the page is centered or justified left.
- css code that sets up the columns

etc …

I like to put the page structure code in its’ own file because page structure css code is verbose (there’s a lot) and it can get a little black-magical.

What is black-magical css?

We all know that except for the simplest css layouts, it can be a real pain in the ass to get page layout to work in css.

… Especially when floats and Internet Explorer bugs come into the mix.

Anyway, the point is that css for page layout often contains nonsensical (black-magical) code to make it work.

OK, back to page-structure.css:

Another reason to have page-structure.css, is that once you’ve done creating your page structure, you rarely have to go into that code. So why bother having to scroll past it every time you edit other parts of your css?

Personally I find myself tweaking css rules for text, color and images much more than I do page structure css.

Text-styles.css contains css code that only affects text. So I have all my header tags defined along with paragraph tags and classes. Again, when needing to edit some aspect of my text for the hundredth time … I just pop open the very clean and simple text-styles.css.

Misc.css is a style sheet that contains css code that does things other than page structure and text styling. This ultimately is a judgment call, but I typically put in formating for tables, forms, list or special id’s and classes.

IE-styles.css is of course, for your css rules that manage the Internet Explorer bugs. This all ties into the IE Conditional comments strategy.

You may need another ie-styles.css to deal with specific versions of IE. For example, you may have an ie6-styles.css. But thankfully, this is becoming less and less likely since IE6 use is falling fast.

Thanks for reading,

Stefan Mischook

www.killersites.com

Over the last few years a whole bunch of CSS / web standards based books have hit the market. Some were good and some sucked
but there was one thing that was been consistent about them: they all reflected the maturing web design community.

You need to pay attention the word maturing: there were still a few technnical things that had not exactly settled in terms of how web designers should do things.

HTML Utopia: Designing Without Tables using CSS is among the first books I’ve seen that demonstrates a maturity in web design.

WHAT IS THIS BOOK ABOUT

It’s all about modern web design practices and techniques. The following topics are covered over 450 pages:

01. Basics
02. CSS 101
03. CSS Code
04. Validation & Backward Compatibility
05. Color
06. Fonts
07. Text Effects
08. Simple CSS Layouts
09. Three-Column Layouts
10. Fixed-Width Layouts
A. CSS Miscellaneous
B. CSS Color Reference
C. CSS Property Reference

WHO IS THIS BOOK FOR?

If you are a total noob to web design, this is not the book for you. You can start with my free web design tutorial to get your feet wet, then you’ll be ready to buy this book!

You need to have a basic understanding of HTML and CSS. Once you have that, this book would quickly guide you through the sometimes thorny path to web design nerd glory.

Again, a book worth getting.

Stefan Mischook

www.killersites.com
www.killerphp.com

A good title for people new to modern web design practices that include:

• CSS for layouts
• Semantic code
• Accessibility in web design

The topics are covered within the context of small usable projects, that can easily be adapted to your own web design work.

Though published in 2005, the material is still relevant and still is a pretty good buy.

Web design has changed drastically since this book’s first edition came out … and thankfully Web Design In A Nutshell has been updated accordingly.

As with all of Oreilly’s ‘Nutshell’ books, Web Design In A Nutshell covers each topic in a concise and yet complete manner making it both a great learning title (for people with some web design skills,) and a great reference.

Some of the topics covered:

• CSS – basics, page layout methods, hacks, tricks etc
• HTML, XML and XHTML
• Accessibility
• Web graphics

… and so much more.

Besides the core coverage of the material itself, this book is also packed with great references to web sites and other good books on web design.

Get the book.

In this article/video (see below,) we are going to solve this problem using a lesser known JavaScript method: the Matching Columns Script.

Let’s start  out by checking out a diagram that illustrates the problem:

People have come out with different solutions including the ‘Faux columns’ hack:  using a vertically tiled background image to create the illusion of a column.

The ‘Faux columns’ hack/trick works, but it does have some limitations:

• You have to mess around with background images when creating the fake/faux columns effect – there is even more mucking about when you have liquid layouts.
• You won’t be able to use CSS border styling (on your div’s that create the columns) because it would reveal the hack.

THE BETTER WAY TO HANDLE THIS PROBLEM: DOM SCRIPTING (JavaScript)

JavaScript (sometimes called ECMA script,) is the programming language built into all the browsers that allow geeks/nerds, to have practically total control over how things appear in a web page – it’s very powerful.

Note: DOM scripting (the term,) is a quick way to describe using JavaScript to control a web page’s structure. If this makes no sense, don’t worry about it as you need no programming knowledge to use the technique that is covered here. 

 WHY IS THE JAVASCRIPT METHOD BETTER?

You are better off with the JavaScript method (rather than the ‘Faux columns’ hack, ) because:

1. Once it is applied, you don’t have to worry about it as it automatically adjust itself to change with your page(s).
2. It is much easier/faster to apply than the ‘Faux columns’ hack.

 GETTING STARTED

Attached with this article you will find the files you need to apply the script:

1. The Javascipt file.
2. The CSS document.
3. A sample web page that puts it altogether.

Now it’s time to watch the video to learn how to use it.

 MATCHING DIV HEIGHTS VIDEO

CONCLUSION

There is one downside to this technique:

It won’t work if people have JavaScript turned off. Fortunately, the vast majority of people out there have it on. Last time I checked my own stats, nobody had JavaScript disabled.

That said, though it looks a lot better when your columns heights match, I would not consider it mission-critical to a website. That is to say; people will still be able to use the website, so I am willing to accept that for some rare (paranoid) individuals, the columns will not match.

Source Files

As some of you may know, I have been against using CSS hacks for a long while.

Now that IE7 is coming out very soon and we know that many CSS hacks will break in IE7, we need to come up with another viable solution to make CSS based layouts work in IE6, and the other more capable browsers …

That’s where IE conditional comments come in. This IE specific code/tool is safe and solves all our problems when creating cross browser pure CSS layouts.

Check out the video: IE Conditional Comments

…

Indeed, a simple thing like a 3 column layout is a challenge - when you don’t use tables. As such, you can find many articles on many web standards zealot websites that attempt to solve this problem. All of them falling short, all of them requiring the use of hacks – hacks that can break and WILL break.

IRRESPONSIBLE ‘EXPERTS’

The article in question, though recent, still advocates/demonstrates the use of a hack to get it to work with the most popular browsers … they don’t learn, do they?

I say this because a few months ago, it was discovered by the web community that many commonly used CSS hacks will break in the new, fully standards compliant IE7 … thus breaking countless web standards zealot website’s. So much for saving time and the myth of forward compatibility.

PEOPLE SHOULDN’T USE HACKS TO MAKE THEIR CSS WORK!

It gets me ‘hot under the collar’ when I see articles that promote the use of CSS hacks – this is bad practice for obvious reasons.

I’ve been warning about this for some time before the IE7 problem. None of these web standards zealots payed me much attention before the IE7 problem came to light; and now after this problem has been well publicized, it seems that these people still have their heads in the sand!

CSS FOR PAGE-LEVEL LAYOUT IS WEAK

Even in a perfect world, where all the browsers supported the standards perfectly, CSS page-level layout capabilities suck for many types of layouts … HTML tables are much easier to use.

That said, there is a CSS tables specification that works like HTML tables, but no browsers support it! There should be a ‘call to action’ to force browser makers to implement CSS tables.

Note:

Tables are grids, and grids are a proven tool for page layout that are used in programming languages (like Java) to create user interfaces. It’s about time that we web-nerds have access to this powerful and flexible system of page layout in CSS. For now, we can use HTML tables.

HTML tables may not be semantically correct, and they may bind your formatting to your page structure, but they will work in all browsers without the need for fragile hacks and they are really easy to use.

 CONCLUSION

Web standards were created to make web design easier for web developers by having the browser makers build their browsers according to a standard specification – the web standards.

As soon as you have to work harder, and have to jump through hoops (use hacks) to make your pages work – the point of the  web standards is lost. It makes no sense to try and force web standards (in ultra-strict terms,) unless the browsers properly support the web standards – they don’t right now.

Stefan

-

Grid layout patterns are commonly used in creating software interfaces – in web design we call them ‘tables’.

But today HTML table based layout is generally frowned upon because:

1. HTML tables render/display content in a fixed format/style that might not display properly in certain types of browsers.
2. Tables semantic meaning is thought to represent tabular data – like a spread sheet. Thus using them for page level layout is just wrong … gosh darn it!

There are other reasons why some web designers will say HTML tables suck:

• HTML tables cause code to be bloated and thus pages will take longer to download.
• HTML tables will make your website less search engine friendly.
• HTML tables will make your websites less accessible.

The last 3 points are myths and should be ignored – I covered that in other articles.

That being said, the first point about tables imposing a fixed format/style (where formatting and structure are intertwined – that’s bad,) is very real and very important. It is so important in fact, that I will do what I can to avoid table based layout despite the extra work and problems this can cause.

It’s a terrible shame

Using a grid/table to create UI’s is intuitive, too bad that table based layouts are so controversial … but there maybe is a light at the end of the web UI tunnel: CSS table layouts.

What the heck are CSS tables?

From the W3C:

‘The CSS table model is based on the HTML 4.0 table model, in which the structure of a table closely parallels the visual layout of the table.’

Now in English:

CSS tables are just a set of CSS attributes that you can apply to (probably) div tags to create a ‘table’. Check out this code snippet and things should clear up:

This is an official W3C specification, I’m not inventing anything here!

So why invent CSS tables when we have HTML tables?

The answer is simple young grasshoppers: to gain the advantage of table based layout while avoiding the problems (mentioned above) with HTML tables:

1. HTML tables format content in a fixed structure that might not render properly in certain browsers.
2. Tables semantic meaning is thought to represent tabular data – like a spread sheet. Thus using them for page level layout is just wrong.

CSS tables can’t be used in any browser today, so why mention them?

I have two reasons why I wrote this article:

1. To educate people of this long term possibility and maybe to start stirring things up – it would nice to have this web design tool.
2. To make a point about grid based layouts: they have merit and should be considered.

Stefan Mischook

Before anyone attempts to tell me that the Web Standards community does not promote the use of hacks, please refer to just about every book written on Web Standards based web design.

Why were hacks promoted?

In a nutshell: those who promoted them are inexperienced … in other words: green. It is simply bad practice to rely on broken aspects of a technology in an attempt to make things work – any programmer worth his salt knows this. And that is exactly what many/most hacks rely on – broken aspects of Internet Explorer.

-
Anecdote: I’ve often had to ’slap-down’ young-pup programmers (just a few years out of school,) when they’ve tried to introduce into the code base, what would be the equivalent of CSS hacks.
-

CSS hacks are a recipe for disaster that I’ve been predicting for a while, a disaster that seems to be happening: it looks as though IE7 will be breaking CSS hacks and thus, the Web Standards myth of forward compatibility.

I’ve used a hack: I’m a god-curse hypocrite:

Yes, I’m guilty of ‘following the pack’ and I’ve used a single CSS hack (child of div hack) but I used it in a minimal way – should the hack fail (and it will in IE7,) my layouts will still work though the pixels will shift a little.

The real problem occurs when you start using many hacks or if your hacks should fail, your website’s usability will be severely compromised.

If you have to use hacks, use them very delicately.

The hack-free cross browser compatible solution:

When you’re critical of something, you should try to present alternatives … and my alternative to using brittle CSS hacks:

Use a IE conditional comments, Microsoft intelligent solution to cross browser coding.

I know, I know … Microsoft coming up with an intelligent solution!?

Stefan Mischook (a.k.a: The Web Design Heretic )

The raison d’être for the Web Standards: to simplify the web design work-flow.

Keep that in mind when you are doing your web design work; if you find you’re getting caught up in details that will not have any practical impact on the project’s success … you must learn to think (and work,) outside of the Web Standards box.

I’m not saying to forget the Standards (heaven forbid,) all I’m suggesting is that you remember that your ultimate goal is to build quality websites as quickly as possible.

Case in point: The use of IE conditional comments.

Instead of using questionable CSS hacks to make your web pages work in both IE and Standards compliant browsers (FireFox etc,) it is better to use a the non-standard IE conditional comments.

Why?

IE conditional comments are forward and backward compatible (in Internet Explorer,) and will not break functionality in the other browsers – thus you can safely use them to isolate CSS code for IE.

Conclusion:

IE conditional comments are NOT part of the Web Standards (that’s for sure!) but they offer a better solution than the hodgepodge of widely touted and soon to be breaking CSS hacks.

Yes, we are thinking and working outside of the Web Standards box … but by golly, it works better!

The web heretic. (a.k.a.: Stefan Mischook)