CSS - The Layout Is Moved To The Side

.news {
	float: left;
	clear:left;
	margin: 0 0 1em 0;
	width: 100%;
}
.img_hl {
	float:left;
	margin-right: 10px;
}
.newstext {
	padding-top: 1em;
	float:left;
}

<style>
	#control_panel 
		{
		padding:0 0 1em 2em;
		width:600px;
		float:left;
		}

	.smalltext 	
		{ 
		font-family: arial, helvetica, sans-serif;
	   	color: #000000;
	   	font-size: .7em;
		}
		
	.input 
		{ 
	 	font: .9em Arial, Helvetica, sans-serif; 
	 	background-color: #FFFFFF; 
		color: #146eb4; 
	 	border: 1px solid #146eb4; 
		}
		
	label
		{
		text-align: left;
		display: block;
		}

		
	div.search_cell 
		{
		display: inline;
		}
		

</style>


<div id="control_panel">

	<form action="http://test.at" METHOD="post">

		<div class="search_cell">
			<INPUT class="input" NAME="search_box" value="" size="25" maxlength="200"> 
			<label for="search_box"><span class="smalltext">search</span></label>
		</div>

		<div class="search_cell">
			<select class="input" name="range">
				<option value="50">50</option>
				<option value="Any">Any</option>
				<option value="1" >1</option>
			</select>
			<label for="search_box"><span class="smalltext">within</span></label>
		</div>

		<div class="search_cell">
			<select class="input" name="range_measure">
				<option value="Miles">Miles</option>
				<option value="kilometers">Kilometers</option>
			</select> 
			<label for="search_box"><span class="smalltext">range</span></label>
		</div>

		<div class="search_cell">
			<span class="smalltext">of</span>
		</div>

		<div class="search_cell">
			<INPUT class="input" value="" type="Text" name="location" size="10">
			<label for="location"><span class="smalltext">city & state or postal</span></label>
		</div>

		<div class="search_cell">
			<INPUT class="input" type="submit" name="Submit" value="Go">
		</div>

	</form> 	

	</div>

</div>

<div id="spotlight-wrapper">
	<div class="spotlight">
		<h3>Currently...</h3>

		<div id="training" class="spotlight-sub">
			<ul>
				<li><strong>Running</strong> 3mi/4mi/3mi</li>
				<li><strong>Bench Press</strong> 175lbs</li>
				<li><strong>Deadlift</strong> 205lbs</li>
				<li><strong>Squats</strong> 275lbs</li>
			</ul>
		</div>

		<ul class="inline-list">
			<li>
				<a href="http://www.randomhouse.com/features/crichton/airframe/" title="Random House Publishing: Airframe">
					<img src="/images/reading.png" alt="Airframe by Michael Crichton" />
				</a>
			</li>
			<li>
				<a href="http://www.google.com/musicl?lid=HnJbFL6nobL&aid=lqUKIAaw6tN&sa=X&oi=musiamp;c&ct=result" title="Google Music: Hinder - Extreme Behavior">
					<img src="/images/listening.png" alt="Extreme Behavior by Hinder" />
				</a>
			</li>
			<li>
				<a href="http://en.wikipedia.org/wiki/300_(film)" title="300 the movie on Wikipedia">
					<img src="/images/movie.png" alt="300 - Tonight We Dine In Hell" />
				</a>
			</li>
			<li>
				<a href="http://www.fox.com/house/" title="Fox's House M.D. starring Hugh Laurie">
					<img src="/images/television.png" alt="House M.D. on Fox" />
				</a>
			</li>
		</ul>
	</div>

	<div class="spotlight">
		<h3>In the public...</h3>
		<div id="calendar">
			<ul id="events">
				<li>
		   		<strong>09/25 20:00 - 09/25 21:00</strong>
		   		<br />House MD
		    	</li>
		    	<li>
		   		<strong>09/26 16:00 - 09/26 17:00</strong>
		   		<br />Weekly Tempo Run
		    	</li>

		    	<li>
		   		<strong>09/26 17:30 - 09/26 18:30</strong>
		   		<br />RPM (Christi)
		    	</li>
		    	<li>
		   		<strong>09/27 06:00 - 09/27 07:30</strong>
		   		<br />Weight Training
		    	</li>
		    	<li>
               <strong>09/28 06:00 - 09/28 07:30</strong>
		   		<br />Weight Training
		    	</li>
		    	<li>
		   		<strong>09/28 08:30 - 09/28 09:30</strong>
		   		<br />RPM (Lauren)
		    	</li>
		    	<li>
		   		<strong>09/29 07:30 - 09/29 09:30</strong>
               <br />Long Run
		    	</li>
			</ul>
		</div>
	</div>
</div>

div#spotlight-wrapper {
	min-height: 317px;
}

div.spotlight {
	width: 471px;
	height: 100%;
	float: left;
	margin: 19px 12px 7px 0;
	background: #373737;
	overflow: hidden;
}
	div.spotlight h3 { background: #555555; margin: 0; padding: 7px; }

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Title</title>

	<style type="text/css">
		<!--
 
		#leftpane {
			float: left;
			height: 100%;
		 	border: 1px solid black;
		}


		#rightpane {
			float: right;
			height: 100%;
		 	border: 1px solid black;
		}

		-->
	</style>

	<script type="text/javascript">
		<!--
	
		// get rid of all this javascript and figure out a way to do this with css
		
		var windowWidth = 800;
		
		window.onload = function() {
			getWindowSize();
			resizeLeftPane();
		}
		
		window.onresize = function() { 
			getWindowSize();
			resizeLeftPane();
		}
	
		function getWindowSize() {
			if(window.innerWidth) {
				windowWidth = window.innerWidth;
			} else if(document.documentElement.clientWidth) {
				windowWidth = document.documentElement.clientWidth;
			} else if(document.body.clientWidth) {
				windowWidth = document.body.clientWidth;
			}	
		}
		
		function resizeLeftPane() {
			var rightpaneWidth = document.getElementById('rightpane').offsetWidth;
			var margin = 10;
			
			document.getElementById('leftpane').style.width = String(windowWidth - rightpaneWidth - margin * 3) +'px';
		}
		
		//-->
	</script>
</head>

<body>
	<div id="leftpane">
		<p>this pane needs to stretch as wide as it can while leaving room for the image at right, whose width is arbitrary</p>
	</div>
	<div id="rightpane">
		<img src="http://movingboxstudios.com/testz0rz/images/box.jpg" height="100%" alt="image" />
	</div>

</body>
</html>

a {
display:block;
width: 6em;
padding: 0.2em;
line-height:1.4;
background-color: pink;
color:black;
}