CSS is far from perfect. Ignoring browser bugs there are still many things that make my life difficult on a day to day basis at work. Personally I would find a CSS variable system far more useful for colours than for px widths.

Some kind of CSS variable system would be a huge step forward, and many people have been using the ‘CSS+V’ solution for years, in itself this shows there really is call for it to be discussed and included in the CSS spec in the distant future.

However I disagree with the example you’ve chosen, and most of the comments that people have been left.

There seems to be quite a divide between traditional programmers and those who work with CSS/HTML. I work with both client side and server side web coding on a daily basis, so I’d like to think I have a slightly balanced opinion (I’m sure many might disagree)

The example you chose is a particular method of doing a traditional 3 col layout that happens to rely on a fair amount of negative margins and position juggling. It’s a quite extreme example to take. There are other methods that require far less repitition to achieve the same goal.

While I’ll willingly admit that CSS has its flaws and needs much improvement, I’m really quite baffled as to how people still prefer tables. The only real advantage they offer is the ease of an equal height multi-column layout, something which is achievable with CSS, in some cases using a combination of a single table to layout columns and then CSS for everything else is by far the simplist solution.

It seems that a lot of the comments here advocate tables rather than CSS entirely, not just for layout. Once you get beyond simple columns, tables become incredibly complex compared to CSS. I’ve spent a lot of time working with both table and semantic/CSS sites, and by far semantic HTML/CSS is _much_ easier to build and maintain. I’d love to hear someone who has to work with the resulting HTML for any length of time argue the pluses of tables.

Phew, bit of a rant.

.selector { property: }

It’s a little ugly, but it works, and is pretty clear to me.

If you want to be more snazzy, you could do something like those server side constants, but, maybe a little less intrusively. You could write a preprocessor that will magically replace values in the CSS that’s formatted with the macro names after the values, like this:

#right {
width: 150px; /* rightWidth */
margin-right: -150px; /* rightMargin */
}

The preprocessor would just look for comments after values, and replace the value. If you wanted to be really clever (and who doesn’t) set the value of the macro by the first usage of it. That is, the first occurence of “150px; /* rightWidth */” would define rightWidth as “150px”. Maybe a text editor hack could be used to “process the macros” and allow you to do it all client-side.

And, as far as Taylor’s example table above, CSS still can’t handle with the content is larger than the defined space. Tables will adjust themselves to fit the content. CSS still can’t

http://greggman.com/edit/editheadlines/2004-06-15.htm

I now support using special purpose layout managers. My DesignGridLayout, inspired by the work of Mullet and Sano, is my first attempt using this strategy. I envision additional layout managers derived from use cases and platform look and feels. Stuff like login boxes, property sheet editors, etc.

If I cared more about the web, I’d probably completely bypass CSS layouts and implement a layout manager in JavaScript.

form {
  fieldset {
    input {
      [type=text] {
        /* only applies to elements matching the CSS rule "form fieldset input[type=text]" */
      }
      [type=button {
        /* only applies to elements matching the CSS rule "form fieldset input[type=button]" */
      }
    }
  }
  div {
    input[type=submit] {
      /* only applies to elements matching the CSS rule "form div input[type=submit]" */
    }
  }
}

With most of my stylesheets I arrange all the form related rules separately from the table related rules. If I could nest them like the example above, I could cut out a lot of duplication as well as keep related rules together more easily.

#container{
	width:90%;
	margin:0 auto;
}
#left{
	width:25%;
	float:left;
}
#right{
	width:25%;
	float:right;
}
#center{
	width:50%;
	float:left;
}