I not very good at CSS and I need to create a page that shows divs in other order that are in the script:

in my page i want to be something like this:

<body id="body" > 
   <div id="bodyHolder" > 
      <div id="mainHolder" > 
          <div id="mainColumn">Here will be the main content</div> 
         <div id="leftColumn" > Left Column</div>
      <div id="topLogoHolder">Site Logo</div>
      <div id="topMenuHolder" > Top Menu</div > 
   <div id="footerHolder"> Footer</div>
but I want to be displayed in the following order:

Site Logo, Top Menu, Left Column, Main Column, Footer

My problem is with Footer. I can't get to put it at the bottom of page (not at the window) because the Main Column is not fixed.

The CSS code is :

body {margin:auto; background:url('../imgs/bg.body.jpg') repeat-x; font-family:Arial, Helvetica, sans-serif; font-size:12px; background-color: #FFFFFF;}
#bodyHolder {margin:auto; width:1006px; text-align:left;} 
#mainHolder {width:1006px; text-align:left; display:block; float:left; clear:both; background-color:#FFFFFF; margin:0px; padding:15px 0px 15px 0px; position:absolute; top:150px;}
#mainColumn {text-align:left; display:block; float:right; margin-right:10px;  width:810px;} 
#leftColumn {text-align:left; display:block; float:left; width:180px; } 
#topLogoHolder {width:1000px; text-align:left; display:inline; margin-left:6px; float:left; clear:both; height:112px; position:absolute; top:0px;}
#topMenuHolder { text-align:left; display:block; margin:0px 0px 0px 6px; padding:0px; background:url('../imgs/bg.top_menu.jpg') no-repeat; width:1000px; height:38px;position:absolute; top:112px;}
#footerHolder {margin:auto; background:url('../imgs/bg.footer.jpg') repeat-x; height:234px; font-family:Arial, Helvetica, sans-serif; padding:0px;width:100%; display: block;  position: absolute; bottom:0px; height:100%; clear:both;}
I do not know what to try anymore (google gives me no clue... all my attempts failed )

I'll appreciate any help! Thanks a lot in advance