It was more that you called how 99.99% of CSS layouts are built as a 'hack'.
FLOATS FOR COLUMNS is not a hack, no matter how you color it -- that's part of what floats are FOR. The negative margins might seem hack-ish if you don't understand margins or the relationship between flow and render -- they're not a hack either though if you read the specification. That statement ALONE should get you laughed clean off every internet development website in existance -- it's THAT incorrect! This is what they are for according to the CSS specification! You know -- the rules that say HOW we're supposed to do all this stuff?
Well, first you might want to add inline-block to that... get rid of all the redundant classes when you have perfectly good ID's on everything, and lose the #header div that should probably be a h1. Likewise the unique 'welcome' ID seems pointless, and 'page' is just a little vague since every 'page' is a page. What is it DOING would be the question.
It also appears you fail to grasp how text-align works since that only effects the CONTENT of a div, not it's core, so unless you are planning on putting inline-blocks inside your div... and of course you can't set inline-block on DIV's in IE. (under IE inline-block only works on inline-level elements, so unless you are planning on restricting yourself to the use of SPAN instead of DIV, H#, P and UL in the entire document...)
Also you're stating widths that may or may not cover the white-space between the inline-elements being treated as a single space character.
Oh, and your width declarations would be ignord since display:inline elements can't have widths or heights on them in anything other than IE. (and in standards mode the only reason in works is that it trips haslayout)
So really I don't see how anything you have there could ever work in any browser. I think you have text-align confused with FLOAT.
Though it might actually work in IE 5.x - since it INCORRECTLY treats text-align in all sorts of weird ways, though again as a rule of thumb usually it only handles the CONTENT's behavior, not itself... so targeting #nav1 as text-align:right isn't going to move #nav1, only the stuff IN nav1.
Set 'outline:1px solid #F00' on .contentsection to see the problems
I don't know where you got it in your head floats are a 'hack' or shouldn't be used for building columns... much less that display:inline without a single inline-block or text-align is EVER going to do the job.
That's not how CSS works.
MAYBE if you set inline-block on the three, got rid of the text aligns, it MIGHT line up in some and drop on others (like large fonts/120dpi) depending on the screen width. (since % width !== % character size). Part of why all three columns as percentage width is a miserable /FAIL/ at design that breaks 99% of the time people try and use it. (especially since you can't declare % margins as % of width -- that's based on % of font size)
Much less you're not going to get 100% min-height layout out of that... ever. That ALONE is enough to make me think you don't know enough CSS to be saying much of anything on the subject.
I mentioned doing it without caring about source order... I think this is what you are THINKING on doing.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Template Design CSS
/* null margins and padding to give good cross-browser baseline */
a nav here<br \\>
another line<br \\>
another nav here
main content here
It's certainly simpler, it also puts content last, it also lacks the min-height code.
Kinda funny, your statements and code almost say "I learned CSS on Netscape 4" and never bothered to join us over the past decade.