leftcontent

#leftcontent {
  position: absolute;
  left:10px;
  top:50;
  width:199px;

  background:#fff;
  border:1px solid #000;
}

When people refer to relative placement in CSS they don't really mean it in the useful sense. Relative in CSS is relative to the parent layout, or relative to the position an object would usually be in. What would be more useful, you ask? How about this, being able to refer to another object and use a style value from that object.

For example, in this page, notice that the right column (and for code symetry, the left) has an explicit "top" specified. Without this, it would flow to below the other columns. But you know what? The value given, 50px, as absolutely ZERO semantic meaning. Grading a C program I would deduct for such arbitrary values not being replaced with an enum or #define. What I really want is to be able to specify that the top should be equal to the bottom of the banner. Perhaps something like:

#rightcontent
{
  top: #banner:bottom;
}

With this sort of capability pages could be made to resize more correctly, even in the face of a user doing something like overriding the default font (as a user that is my right, and your layout shouldn't explode because of it).

centercontent

#centercontent {
  margin-left:  200px;
  margin-right: 200px;

  background:#fff;
  border:1px solid #000;
}

Today I've figured out why CSS blows so hard. The question that it all comes down to is: Why did they discard everything having to do with a modern programming language?

For example, CSS has something called a "class", but not the concept of inheritance. This makes changing large numbers of similarly classed elements annoying. If I have a number of elements that are all related (i.e. show up in a single form, or even on the same page) and I want to make them all appear consistantly I can apply a class to them. But if I want to have a few stand out slightly differently, well, I could make another class, copy the contents of the first class, and there we go. And if I want to do it again? How about a couple attributes that should be applied to a number of CSS declaration blocks? Copy and paste is my best option? What I want is relatively simple. Consider the code below:

.whiteBox
{
  background:#fff;
  border:1px solid #000;
}

#leftcontent
{
  position: absolute;
  left:10px;
  top:50;
  width:199px;

  background:#fff;
  border:1px solid #000;
}

#rightcontent
{
  position: absolute;
  right:10px;
  top:50;
  width:199px;

  background:#fff;
  border:1px solid #000;
}

Note that the background and border are specified for each of the elements, but are also declared in a class above them. All I want is a "parent" style element. I do not want to inherit the style of the parent in the DOM, but rather specify another declaration to inherit from. Then a declaration could be done as:

#leftcontent
{
  parent: .whiteBox;

  position: absolute;
  left:10px;
  top:50;
  width:199px;
}

If this seems like a trivial savings, well, I disagree. For a large number of similar objects, or even for a small number, humans are lazy and inaccurate. Keeping required duplication to a minimum should be the goal of any language (don't even get me started on that more wonderful imformation exchange language, XML).

I have seen better examples of 3 column layout than the one I started with, but really, this was more about understanding how CSS works that trying to get the three columns just the way I wanted them. Also, its really just tricks atop the same CSS capabilities, which I find fundamentally lacking. Link to a better three column layout: http://www.alistapart.com/articles/holygrail

rightcontent

#rightcontent {
  position: absolute;
  right:10px;
  top:50;
  width:199px;

  background:#fff;
  border:1px solid #000;
}

One last thing, being able to specify multiple classes for an element would also fix my problems, but not nearly as elegantly as class (or rather declaration) inheritance. In a related mechanism I can mark objects with a series of attributes, and then use a CSS attribute selector to essentuially pull off the multiple class trick, but it is really ugly. Wasn't there something about seperating content from layout?