hello all,

I am trying to use the following code to produce a three column table*. A couple of problems: the right-hand column maintains a width that I just can not change. Regardless of how I adjust its or any other values it stay keeps a static width. It would be OK if it moved over to the right far, but I can't do that either. The second problem appears in FF where I can't get the left menu content to move up to where it should be at the top. ...making me crazy. It looks crappy in IE and FF.


HTML Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
/* mac hide\*/
html, body {height:100%}
/* end hide */
body {
	padding:0;
	margin:0;
	text-align:center;
	min-width:1031px;/* for mozilla*/
	background-color: #ededdd;
	color: #ededdd;
}
#outer{
	height:100%;
	min-height:100%;
	width:1031px;
	color: #000000;
	text-align:left;
	margin:auto;
	position:relative;
	background:  url(images/beigeknithorizontal.jpg) repeat-y center center;
	position:relative;
}

html>body #outer{height:auto;} /*for mozilla as IE treats height as
min-height anyway*/
#innerwrap {/* enables content first */
	float:left;
	width:738px;
	border: solid blue 1px;
}
#header{
	position:absolute;
	top:0;
	left:-1px;
	width:1031px;
	height:207px;
	overflow:hidden;
	color: #000000;
	z-index:100;
	background-image:url(images/header.jpg);
}
#upper-nav ul {
	margin-left:765px;
	padding: 2px 0 0 0;
}
#upper-nav ul li{
	font-family:Arial, Helvetica, sans-serif;
	font-weight: bold;
	display: inline;
	padding: 0 6px;
	text-align: right;
}
#left {
	position:relative;/*ie needs this to show float */
	float:left;
	padding-top:207px;/*needed to make room for header*/
	padding-bottom:32px;/* needed to make room for footer */
	background-image:url(images/verticalknit.jpg);
}
#left p {padding-left:3px;padding-right:2px}
#left ul {list-style:none;}
#right p {padding-left:58px; padding-right:73px}

#right {
	position:relative;/*ie needs this to show float */
	width:245px;
	float:right;
	padding-top:207px;/*needed to make room for header*/
	padding-bottom:32px;/* needed to make room for footer */
	background-image:url(images/rightverticalborder.jpg);
	background-repeat:repeat-y;
}

#footer {
	width:1031px;
	clear:both;
	height:250px;
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	color: #ededddd;
	text-align:center;
	left:0;
	bottom:0;
	position: absolute;
}
* html #footer {/*only ie gets this style*/
	\height:250px;/* for ie5 */
	he\ight:250px;/* for ie6 */
}
div,p  {margin-top:0}/*clear top margin for mozilla*/ #content {
	width:574px;
	float:right;
	padding-top:207px;
	padding-bottom:32px;/* needed to make room for footer */
	border: solid orange 1px;
}
#content_area {
	background-image:url(images/contentbackground.jpg);
	/*background-attachment:fixed;*/
	background-repeat: no-repeat;
	padding-top: 207px;
	padding-left:145px;
}
#content p {padding-left:1px}

.clearfooter {width:100%;height:52px;clear:both} /* to clear footer */ p {
	line-height: 1.2em;
}
h2.yellow {

	background-image:url(images/yellowbar.jpg);
	background-repeat: no-repeat;
	padding: 17px 0 0 56px;
}
h2.blue {

	background-image:url(images/bluebar.jpg);
	background-repeat: no-repeat;
	padding: 17px 0 0 56px;
}
h2.green {

	background-image:url(images/greenbar.jpg);
	background-repeat: no-repeat;
	padding: 17px 0 0 56px;
}
h2.red {

	background-image:url(images/redbar.jpg);
	background-repeat: no-repeat;
	padding: 17px 0 0 56px;
}
h2.purple {

	background-image:url(images/purplebar.jpg);
	background-repeat: no-repeat;
	padding: 17px 0 0 56px;
}
.classTitle {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 14px;
	font-style: italic;
}
#footer_top ul li{
	display: inline;
}
footer_bottom ul li{
	display: inline;
}
p.volusioncredit {
	font-size: .75em;
}
</style>
<title>Untitled Document</title>
</head>

<body>
     <div id="outer">
           <div id="innerwrap">
             <div id="content">
                 <table width="95%" border="1" align="center" summary="What's Needling U products">
                     <tr>

                         <td id="main_content" valign="top">

                         <div id="content_area">CONTENT AREA</div>
                         </td>
                     </tr>
                 </table>
             </div>
                 <div id="left">

                     <div id="first_nav" class="nav_section">
                         <h3>Menu1_Title</h3>
                         <ul>
                             <li id="display_menu_1">Display_Menu 1</li>
                         </ul>
                     </div>
                     <div id="second_nav" class="nav_section">
                         <h3>Menu2_Title</h3>

                         <ul>
                             <li id="display_menu_2">Display_Menu 2</li>
                         </ul>
                     </div>
                         <div id="search_section">
                           <h3>Search</h3>
                             <form name="form1" method="get"  
action="/SearchResults.asp">
                                 <input id="search_field" type="text" 
name="Search" value="" />

                                 <input id="search_button" type="image" 
name="Search" 
src="vspfiles/templates/90/images/Template/search_button.gif" />
                           </form>
                         </div>
                 </div>
         </div>


          <!-- end innerwrap -->
               <div id="right">
                 <h2 class="yellow">Classes</h2>
                 <p class="classTitle">Hedgehogs:</p>

                 <p>&nbsp;</p>
                 <h2 class="blue">Of Interest</h2>
                 <p>Coupons</p>
                 <p>Free Shipping</p>
                 <p>&nbsp;</p>
                 <p>&nbsp;</p>
                 <h2 class="green">Special Events</h2>

                 <p>Knit and Pitch</p>
                 <p>Fiber Mill</p>
                 <p>Estes Park Yarn Show</p>
                 <h2 class="red">Hints</h2>
                 <p>&nbsp;</p>
                 <p>&nbsp;</p>
                 <p>&nbsp;</p>

                 <h2 class="purple">Join Our Email<br />
                 List</h2>
                 <p class="purple">kim@whatsneedlingu.com</p>
               </div>

               <div class="clearfooter"></div>
         <!-- Footer Start -->



           <div class="clearfooter"></div>
           <!-- ie needs this -->
           <div id="header">
             <div id="upper-nav">
                 <ul>
                         <li>Home</li>
                         <li>Contact Us</li>
                 </ul>
             </div>

           </div>

             <div id="footer">
                
             </div>
         </div>

</body>

any help is so appreciated.




* thanks to Paul for the start and apologizes for messing it up so badly