Two column layout problems

[emorgoch]

So I'm trying to create for myself a header + two column layout with CSS, and I'm having some severe difficulties. I've spent 3 days researching on the web, looking at various people's CSS designs, and none of them have matched the layout I'm looking for.

The idea of the layout is as follows:
1) Fixed height header that spans across the whole top of the viewport
2) A fixed width sidebar
3) A variable content area that spans the rest of the viewport

Both the sidebar and content areas should have variable heights, taking the max of either the remaining veiwport height (content of both sidebar & content is less than viewport area), the height of the sidebar (sidebar is longer than content & viewport), or the height of the content (content long than sidebar or viewport).

I've managed to create a near-working page that meets this criteria using a table, but it has two flaws in it:
1) If a DOCTYPE is declared, both IE 6 and 7 make the header a variable height, reaching as much as 50% of the viewport length of there's no content
and
2) It uses tables to outline the layout, as opposed to a pure CSS approach, which (to my understanding), is the standard that should be attempted these days.

I've put my sample up here (http://emorgoch.no-ip.com/PageSample/) which you can use to show the functionality I'm looking for, download the source for the sample here (http://emorgoch.no-ip.com/PageSample/Default.txt).

Oh, and one last condition: This is for an internal intranet site that uses ASP.NET, so atleast the sidebar & content areas need to be encapsulated in a <form runat="sever"> tag.

Many thanks for the much appreciated help guys.

[KDLA]

body {margin: 0; padding: 0; background: #e6e6e6 url(file.gif) repeat-y left;}
#banner {display: block; height: 55px; width: 100%; margin: 0; padding: 0; background: #6ef5ef; border-bottom: 1px solid #000;}
#sidebar {display: block; float: left; width: 260px; margin: 0; padding: 0; border-right: 1px solid #000; background-color: #e6e6e;}
#content {display: block; margin: 0 auto auto 260px; padding: 0; background-color: #fff;}

<div id="banner">
</div>
<div id="sidebar">
</div>
<div id="content">
</div>

You'll need to make an image of the gray that is 260px wide, doesn't matter how tall.

KDLA

[neophyte3]

I'm an utter beginner in working with CSS so pardon if my question is really stupid.

I am trying to create a similar page as Emorgoch, but I want the main content section to have fixed width. How do I do that (what should I change in the code?)? I have also created a image to illustrate what i'm trying to do, since I'm not much of an explainer. The borders on the image are just there to make it a bit easier (in my opinion) to understand, I don't want borders on the page.
Image (http://i17.tinypic.com/4bqywpd.jpg)

[drhowarddrfine]

Just passing through but, quickly, a doctype is not optional. Without one, IE goes into quirks mode. Always use a proper doctype or IE won't attempt to act like a modern browser at all. In fact, IE6 won't even act like IE7.

You should not be using xhtml1.1 either since you are serving it as html (per warning from W3C).

In any case, you should be getting this to work in Firefox or Opera first to make sure your code is correct. Then you can adjust for buggy IE.