Faux Columns - Problems Understanding and Implementing

Question

Here's my site. It's not functional yet, so clicking on links won't do you any good. You can if you really want to, though:
http://www.ladyhawkslair.com/index04.html
The layout content consists of
A header (left; position absolute)
mainContent (floated right)
mainNav (floated left)
sidebar (floated left)
footer (cleared: both)
wrapper (contains everything and provides stone texture background)
I've read a little about faux columns, but
1) I'm not entirely sure I understand the concept. I'm really new to CSS.
2) I want to apply a fix to my current site and not re-do everything.  Because I am new to CSS, it's taken me forever!
The examples cited on the pages I read dealt with columns of the same length.  On my page, the "main content" starts at the top and the sidebar starts further down.  I could cheat and add more height to the sidebar and main content, but it might not look very good if someone is using a font-size of 30 or something.  Also, my footer would get lost. (Would this be an adequate if nothing else works?
Here's my code : http://www.ladyhawkslair.com/code.txt
If you can help me apply a column fix to my current design, please explain it to me like I'm five years old.
If I have to redo everything, I could put the header, mainNav and sidebar into a single column, since they are the same size.  In that case, still explain it to me like I'm five.

Answer 1

I've messed around with a wrapper similar to the one you made for me (very nice by the way), but I don't think the faux column approach will work for me without a major page design overhaul.  The repeating structure is interrupted at various points by a 15 px border of the stone texture, which I would like to keep, especially around the header. The wrapper background is then out of sync with the rest of the page. (The tear pattern doesn't match between the background for the sidebar and the background for the wrapper.)  I tried setting top padding. I can get the two to sync, but then the top of the page looks ridiculous.
I could re-design the header, mainNav and the sidebar into a single column, but sync between the wrapper and the images on the sidebar would still be a problem because I would like to keep the 15px border around the logo on the left and (if possible) between "main nav" and the sidebar.
I've read about a javascript solution, but there are some issues:
1) I know nothing about javascript
2) I'm wondering if the two columns must start at the same place on the page.  My "sidebar" div starts way below the "main content" div. I'd like both to extend to the end of the "main content" div.
3) If I created a two-column page (each column starts at the same distance from the top of the page, would the javascript work? Will it work with the page layout as it is?
My last resort would be to set the height to "auto" on the main content and match the height of the sidebar according to default font size.  It may not look as pretty as it could for some people, but it's better than nothing, I suppose.
If you can think of a better option for me, let me know, especially if someone could help me with the javascript.
P.S. Here is the "last resort" solution: http://www.ladyhawkslair.com
P.P.S It turns out it's not much of a solution because it doesn't look the same in live view, Firefox and IE.  Each is different.