Why is CSS such a mess?

[black3]

It's a great way to change background colors site wide.

But it seems so horribly broken for what it's used for.

The tools given aren't particularly sane for page layout. One should be able to set up whatever constraints (equal, proportional, parallel, etc) as needed and the agent displaying the content finds a suitable solution. As an example, the login div must be equal width as the sidebar div, the sidebar div is at the left of the screen, the navbar is at the top of the screen and above the sidebar, and the content div is below the navbar and to the right of the sidebar. If everything is in a box, it would make sense to use other boxes as a reference point, rather than the screen. Tables are much more intuitive for layout purposes, but simply aren't capable enough. We can do what we need with CSS, but everything along the way is a messy hack.

Why would a spec for something that needs to be pixel-precise not come with an example implementation?

If the point is to separate content and presentation, then why must I change the content to get the effect I want?

[black3]

Here's an example of a two column tableless layout => http://www.daniweb.com/code/snippet684.html
Here's a really good site to go to for CSS tutorials => http://www.alistapart.com/articles/

[MidiMagic]

CSS is not the problem. I use CSS with tables too. The REAL problem is that the div method of making columns falls apart if something won't fit in the allowed space. Usually this happens when the browser window changes size.

It is not a terrible event if you use a table, especially if you must have the parts render in the same relationship to each other. Table is not deprecated. It will force a horizontal scrollbar if stuff doesn't fit, instead of falling apart.

The REAL problem with using tables for layout is that it isn't politically correct. It won't render correctly on devices intended to audibly read a website for the blind. At the beginning of each cell, it inserts verbal text similar to "Table row 3, column 1" into the audible rendering.

The REAL problem with the div method is that there is no equivalent to the tr tag to force stuff to stay in rows. There is also no equivalent to rowspan.

So I suggest that you try to get divs to render what you want. If they don't work, use a table anyway. It will still validate.

What is NOT proper usage is using tables to define page margins. Before CSS margins existed, page authors used table to put margins around the page.

[cmills83]

CSS isnt a problem if you know what youre doing. IMO easier than tables.