DIV Layout for for IE8, should be simple, but? (see code, pictures, example)

I am trying to keep a logo on the left side fixed in place while all the content to the right is in a 700px wide box that centers between the logo on the left, and the browser's edge on the right, without the logo being overlapped or content being hidden. Hoping for a scroll bar when content is off screen, and always see the logo in the same place. Here is the code:

<div id="wrapl">
	<div id="logo">
	  <p>
	    
	    
      Our Logo Text at Bottom of Box </p>
  	</div>
</div>
<div id="wrapr">
	<div id="header">
		<div id="menu">
		<ul>
			<li class="active"><a href="#" accesskey="1" title="">Program</a></li>
			<li><a href="#" accesskey="2" title="">MIssion</a></li>
			<li><a href="#" accesskey="3" title="">In the News</a></li>
			<li><a href="#" accesskey="4" title="">Company Profile</a></li>
		</ul>
		</div>
	</div>
	<div id="video">
		<div id="top-video">
		<p> </p>
		<p> </p>
		<p> </p>
		<p><a href="#"><img src="images/video_gallery2.gif" alt="" width="700" height="299" /></a></p>
		</div>
	</div>
		<div id="header">
		<div id="menu">
		<ul>
			<li><a href="#" accesskey="5" title="">Careers</a></li>
			<li><a href="#" accesskey="6" title="">Contact Us</a></li>
			<li><a href="#" accesskey="7" title="">Legal Disclaimer</a></li>
			<li><a href="#" accesskey="8" title="">Privacy Policy</a></li>
		</ul>
		</div>
	</div>
	<div id="footer">
<p id="copy">© us. All rights reserved worldwide.</p>
	</div>
</div>

and here is the CSS

body {
	margin: 0;
	padding: 0;
	font: Verdana, Arial, Helvetica, sans-serif;
	background: #000000 url(images/p003small.jpg) no-repeat;
}

h1, h2, h3 {
	margin: 0;
	font-weight: normal;
}

h2 {
	font-size: 2em;
}

h3 {
	font-size: 1.4em;
}

img {
	border: none;
}

a {
	color: #FFFFFF;
}

a:hover {
	text-decoration: none;
	color: #FF0000;
}

/* Header */

#header {
	width: 700px;
	height: 100px;
	text-align: center;
}

/* Wrap left*/

#wrapl {
	position:relative;
	width: 280px;
	height: 900px;
	float: left;
}

/* Wrap right*/

#wrapr {
	position:relative;
	width: 740px;
	height: 900px;
	margin: 0 auto;
}

/* Logo */

#logo {
	position:absolute;
	left:2px;
	top:50px;
	background: url(images/logo5.png) no-repeat top center;
	width: 258px;
	height: 84px;
	float: left;
}

#logo p {
	letter-spacing: -2px;
	font-size: 16px;
	text-align:center;
	vertical-align:bottom;
	padding-bottom:0;
	color: #000000;
	font-weight: bold;
}

//* Menu */

#menu {
	height: 70px;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	width: 140px;
	height: 45px;
	padding-top: 25px;
	text-align: center;
	letter-spacing: -2px;
	font-size: 20px;
	color: #FFFFFF;
}

#menu a:hover {
	color: #1A1A1A;
}

#menu .active a {
	background: url(images/img03.jpg) no-repeat;
	color: #FFFFFF;
}

/* Video */

#video {
	width: 700px;
	height: 480px;
}

#top-video h2 {
	height: 1.4em;
	font-size: 1em;
}

#top-video p {
	margin: 0;
	padding: 0 0 10px 0;
}

/* Footer */

#footer {
	padding: 40px;
}

#footer p {
	text-align: center;
	font-size: smaller;
	color: #FFFFFF;
}

#footer a {
	color: #FFFFFF;
}

And here is an image of what I am trying to do: