Problem resizing screen in IE7

[whairs01]

Could someone help me and telling me how to get my 3 column web page to resize correctly in IE7. When trying to reside my my web page I can only get it to resize to a point before the 2 and 3 columns wrap below the 1 column. I am using a mixer of fliud and liquid layout.

Following is my css code that I am using in laying my page out and the HTML program only consist of div statement.

 
html, body 
{
  padding: 0;
  margin: 0;
  height: 100%;
  font-size: xx-small;
  font-family: arial, helvetica, sans-serif;
} 
 
body 
{ 
  margin: 0;
  padding: 0;
  margin: 175px auto;
  background-color: #3399fe;
}
 
/*
  The normal size is 1 em or 100% We set the text that is twice the size by specifying 
  2em or 200%. In this way the size will be relevant to the screen size and font 
  size that is used and therefore should be consistent among compliant browsers.
 
*/
 
.emsize 
{
 font-size: 2em;
 color: #0000FF;
}
 
 
 
.menu
{
    list-style-type: none;
    font-size: 1.5em;
    margin: 5px;
    padding: 5px;
}
 
#facelogo 
{
 position: absolute;
 top: 3%;
 left: 40px;
 background-image: url(../images/new-face-logo.png);
 background-position: left;
 background-repeat: no-repeat;
 height: 150px;
 width: 175px;
} 
 
#scroller 
{
 position: absolute; 
 width: 100%; 
 height: 100%; 
 top: 0; 
 left: 0; 
 overflow: auto;
}
 
 
#content 
{
 padding-top: 5px;
 padding-right: 20px;
 padding-bottom: 10px;
 padding-left: 20px;
}
 
/* 
   The following section is setting up parameters use for setting up a 3 column 
   Web page using pecentage. An attribute "display: inline" was added to the first 
   column to eliminate a bug that occurs in IE 5, 5.5, and 6. These browsers have 
   some quirks when it comes to margins and floats, and sometimes will cause the
   column to slip down past the others. This fix should do the trick.
*/
 
#column1 
{ 
  float: left;
  margin-left: 2%;
  width: 126px;
  height: 480px;
  background-color: #d0f3ef;
  text-align: center;
}
 
#column2 
{ 
  position: relative; 
  float: left; 
  width: 61%; 
  margin-left: 2%;  
  height: 480px;
  background-image: url(../images/lb-logo-chara-large480x435.png);
  background-position: 45px 75%;
  background-repeat: no-repeat;
  background-color: #FEF2D8;
  display: inline;              /* Fixs double float which occurs in Internet 
                                   Explorer 5, 5.5 and 6. */
} 
 
#column3 
{ 
 
  position: absolute;
  float: left; 
  width: 14em; 
  margin-left: 2%;
  height: 480px;
  background-color: #d0f3ef;
  text-align: center;
}
 
 
#bottom-left 
{ 
      background-image: url('../Image/corners/Stdcorners/bottom-left.gif'); /* CHANGE: path and name of your image */
      height: 9px;               /* CHANGE: height of your image */
      background-repeat: no-repeat;
      font-size: 2px;          /* DNC: correction IE for height of the <div>'s */
    margin-right: 9px;
}
 
 
 
/* 
   In the footer is an attribute "clear: both". This is used so the Liquid Layout 
   will stay above the footer, and the footer will be below the 
   layout design. 
*/
 
.clearfooter
 
{
  height: 0;
  clear: both;
}
 
#footer 
{ 
  position: relative;
  clear: both;
  height: 45px;
  margin-top: 20px;
  font-size: 12px;
  text-align: center;
}
 
 
h1
{
  font-size: 2em; 
  font-family: Arial
}
 
p
{
  font-size: 1.5em; 
  font-family: Arial
}
 

Secondly, is there a way which I can also get the background image to resize with the windows too. I really would appreciate any help or direction to were I can find information on how I can do this.