...MidiMagic...
I think you "overead" into what he seems to want - a simple two column layout with Header and Footer... nothing complicated nor impossible with that.


...ashneet...
What you are asking for is possible... but it is fair easier, simplier and more reliable to "cheat".
Due to certain Browsers not following the guidelines, and others doing their own thing... things like "equal height columns" across all browsers are a pain.
So isntead,there are a couple of techniques... but "faux columns" is the most reliable.
This is basically makig a container that has a bg image, then two divs inside the container.
An alternative is to use the Ruthsarian layout... kind of Equal columns with some extras (though more complicated!).


So... simple version (try this one first!)

<div id="container">
<div id="content">
<div id="leftcol">
</div>
</div>
</div>

#container
{
float: left;
clear: both;
#zoom:1; /*IE Bug Fix */
}

#contents
{
margin-left: 200px;
}

#leftcol
{
margin: 0 -1px 0 -200px;
width: 200px;
float: left;
position: relative; /* IE Bug Fix */
#display: inline; /* IE Bug Fix */
}


Give that a go.
If you have a fixed width design, it is a simple case of applying the BG to the Container.
If it is fluid... then make 2 Containers (container1/container2), and make 2 iamges... one almost the fullwiddth of a normal resolution, with only one edge, the second make around the same size, but with the other edge on it... and apply a bit of padding.... so container1 has bg1 and padding-left 20px, container2 has the pther image, and is prevented from overlapping due to the paddig

Seriously - noe of it is complicated (one you figure the logic behind CSS)... and you can do a damn site more than with tables.