hi,
I'm having a bit of trouble with my first site in css. i cant seem to align the content side by in the main section. This section uses Horizontal scrolling, which is causing some probs- if i switch to absolute positioning the scroll bar goes through the header and if i use relative i get 2 scroll bars. i would really appreciate any help or pointers?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>3 col layout with equalising columns and footer</title>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html, body {height:100&#37;}
body {
padding:0;
margin:0;
background:000000;
color: #000000;
font family: courier;
font size: 8px;
}
#outer{
height:100%;
min-height:100%;
margin-left:216px;
background:#ffffff;
border-left:1px solid #000;
border-right:1px solid #000;
margin-bottom:-52px;
color: #000000;
}

html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:70px;
background:#ffffff;
border-top:1px solid #000;
border-bottom:1px solid #000;
overflow:hidden;
color: #000000;

}

#contentcontainer{
position:relative;
top:0px;
margin-left:0px;
margin-top:0px;
width:100%;
height:500px;
background:#ffffff;
border-top:none;
border-bottom:1px solid #000;
overflow:scroll;
float:right;
color: #000000;
padding-left:0px;
}
/* divs for main content-------------------------------*/
#threediv1{
position:relative;
top:0px;
left:0px;
width:100%;
height:405px;
background:#ffffff;
border-top:none;
overflow:hidden;
color: #000000;

}

#threediv2{
position:relative;
top:0px;
left:740px;
width:100%;
height:405px;
background:#ffffff;
border-top:none;
overflow:hidden;
float:right;
color: #000000;
align:top
}


/*end of divs for main content------------------------------*/

#topnavcontainer{
position:relative;
top:10px;
left:220px;
width:100%;
height:90px;
background:#ffffff;
border-top:none;
overflow:hidden;
color: #000000;
}

#topnavcontainer1{
position:absolute;
top:40px;
left:220px;
width:100%;
height:90px;
background:#ffffff;
border-top:none;
border-bottom:none;
overflow:hidden;
color: #000000;
}
/* special */
* { padding: 0em; margin: 0em; }
/* ----------------------------- start #topnav ----------------------------- */
#topnav {position:absolute;}
#topnav img { border: 0px;}
#topnav li { display: inline; list-style:none; }
#topnav li a { float: left; display:block; width: 180px; height: 16px; margin: 0%;}
#topnav li a img { border:none; vertical-align:bottom; /* for IE6 */}
#topnav li a:hover { visibility:visible; }
#topnav li a:hover img { visibility:visible; }
#topnav li a:hover img/**/ { visibility:hidden; /* hide from IE5.0/win */}
/* ----------------------------- end #topnav ----------------------------- */


/* ----------------------------- start #topnav ids ----------------------------- */
#one { background:url(img/top_nav/menu_seehear_02.gif) no-repeat left bottom; }
#two { background:url(img/top_nav/menu_profile_02.gif) no-repeat left bottom; }
#three { background:url(img/top_nav/menu_contact_02.gif) no-repeat left bottom; }
#four { background:url(img/top_nav/menu_clients_02.gif) no-repeat left bottom; }
#five { background:url(img/top_nav/menu_resonate_02.gif) no-repeat left bottom; }
#six { background:url(img/top_nav/menu_friends_02.gif) no-repeat left bottom; }

/* ----------------------------- end #nav ids ----------------------------- */


.logo{
position:absolute;
top:3px;
left:25px;
}


#left {
position:relative;/*ie needs this to show float */
width:160px;
float:left;
border-left:0px solid #000;
margin-left:-159px;/*must be 1px less than width otherwise won't push footer down */
padding-top:82px;/*needed to make room for header*/
}
#left p {padding-left:3px;padding-right:2px}


#left a{
font-family: Courier New, Courier, monospace;
font-size: 12px;
color: #666666;
text-decoration:none;
}


#left ul {
list-style: none;
text-decoration:none;
margin: 10px;
padding: 0px;
}

#left li {
border-bottom: 0px solid #ED9F9F;
font-weight:none;
text-decoration:none;
}

#left li :hover
{

font-weight:none;
text-decoration:none;
/* border-color:blue;*/
background-color:#0000ff;
color:#000000;

}

#left li:active
{

font-weight:none;
text-decoration:none;
background-color:#0000ff;
color:000000;
}

#footer {
width:100%;
clear:both;
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-color: #FFFFFF;
color: #000000;
text-align:center;
position:relative;
}
* html #footer {/*only ie gets this style*/
\height:52px;/* for ie5 */
he\ight:50px;/* for ie6 */
}
#clearheader{height:72px;}/*needed to make room for header*/
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
div,p {margin-top:0}/*clear top margin for mozilla*/
* html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */




</style></head><body>
<div id="outer">

<div id="left">
<ul>
<li><a href="index.htm">Sketch</a></li>
<li><a href="#">Fiat</a></li>
<li><a href="#">Shelter</a></li>
<li><a href="#">Stiff Records</a></li>
<li><a href="#">3 Mobile</a></li>
<li><a href="#">Canon</a></li>
<li><a href="#">Simple Records</a></li>
<li><a href="#">One&Only Resorts</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">Adidas</a></li>
<li><a href="#">Ogilvy</a></li>
<li><a href="#">BBC</a></li>
<li><a href="#">Kaupthing</a></li>
<li><a href="#">Cobra</a></li>
<li><a href="#">Havana Club</a></li><br></br>
<li><a href="#">Audio-visual<br>performance</a></br></li>
</ul>

</div>
<div id="clearheader"></div> <!-- to clear header -->

<div id="centrecontent"><!--centre content goes here -->
<div id="contentcontainer">
<div id="threediv1">
<img src="img/three/1.jpg">
</div>
<div id="threediv2">
<img src="img/three/2.jpg">
</div>
</div>
<div id="clearfooter"></div> <!-- to clear footer -->
</div><!-- end outer div -->

<div id="footer">Footer - | <a href="http://www.pmob.co.uk/temp/2colfixedtest_3.htm">Left column longest</a>
| <a href="http://www.pmob.co.uk/temp/2colfixedtest_2.htm">Centre column longest</a> | <a href="http://www.pmob.co.uk/temp/2colfixedtest_4.htm">No
Column Longest</a> | - Footer
<p></p>

</div>
<div id="header">
<div class="logo">
<img src="img/top_nav/logo_silentstudios.gif" width="191" height="23">
</div>
<!-- open nav -->
<div id="topnav">
<div id="topnavcontainer">
<ul><li>
<a title="" href="#" id="one">
<img src="img/top_nav/menu_seehear_01.gif" alt=""></a>
</li>
<li>
<a title="" href="#" id="two">
<img src="img/top_nav/menu_profile_01.gif" alt=""></a>
</li>
<li>
<a title="" href="#" id="three">
<img src="img/top_nav/menu_contact_01.gif" alt=""></a>
</li>
</div>
<div id="topnavcontainer1">
<li>
<a title="" href="#" id="four">
<img src="img/top_nav/menu_clients_01.gif" alt=""></a>
</li>
<li>
<a title="" href="#" id="five">
<img src="img/top_nav/menu_resonate_01.gif" alt=""></a>
</li>
<li>
<a title="" href="#" id="six">
<img src="img/top_nav/menu_friends_01.gif" alt=""></a>
</li>
</ul>
</div>


<!-- close nav --></div>

</div>

</body></html>