The Unholy Grail of Web Design

This is me complaining about CSS/XHTML and all the bullshit that comes with website design, and one grand—and seemingly impossible—vision. In a nutshell, the proverbial They say, “here are some really great tools [CSS/XHTML] for laying out a website,” followed immediately by, “but good luck getting this shit to work, and don’t let the door hit your ass on the way out, you punk-ass little bitch.” Apologies to Matthew Levine & A List Apart.

Here’s a representation of the grand—and seemingly impossible—website design that I’ve been wrestling with for the past two days:


Here are the specifics about this design which make it the Unholy Grail, and… um… seemingly impossible to achieve using CSS/XHTML:

A: The total width of the website content is fixed and centered in the browser window. The site has a full-, fixed-width header (blue), as well as a full-, fixed-width menu bar below that (gray).

B: As the browser window is resized, the spaces between the site content and the edges of the window adjust to keep A centered. This is the only fluid area of the website, which is apparently very important. Note that the background color of the browser window (here, it’s white, but it should be whatever color I want) is different from any of the elements of the website. Of course, if the user resizes the browser window to a width less than that of A, the dread horizontal scrollbar appears, but so what… that’s not a concern here.

C, D, E: Three columns, each with their own content. Content order inside the XHTML code should be C, D, E. In my dream, C and D are the same width, and E represents a sort of right-side navigation column. Each of these columns has its own background color (which very well could be white, so don’t judge the design aspect of the diagram; we’re talking about the implementation here), and each column’s background color reaches all the way to the bottom, regardless of the vertical length of that column’s content (see C & E) and without faking it. Additionally, each of these columns has a fixed width; none of them is fluid.

F: The site has another full-, fixed-width menu bar (gray), and a full-, fixed-width footer (blue).

And here’s the part that fucks everything up: All of the above happens without JavaScript hacks. All of the above happens with a reasonable amount of CSS tailoring to account for various browser quirks (any MSIE). All of the above renders properly in Internet Explorer 6.x running on Windows—note that I’m not even talking about IE5.x—as well as the other popular browsers whether they’re running on Windows or not.

Yes, again the browser that fucks everything up just so happens to be the most popular browser used today; it’s a given at this point. But, surely, there’s got to be a way to get this shit to work.

Either way, I’m done fucking around with it; do you know how easy it is to do this shit using the nowadays-frowned-upon-by-elitist-assholes table-based layout? It’s a five-minute job… if you type slowly.

If you can find a way to do all the above without using tables, please educate a brother. Otherwise, fuck you and your CSS/XHTML so-called-prowess; I’m doing this shit in a table.