three column width problem craziness
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> </p>
<h2 class="blue">Of Interest</h2>
<p>Coupons</p>
<p>Free Shipping</p>
<p> </p>
<p> </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> </p>
<p> </p>
<p> </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
