I can't get it to work, it does still flee once I've removed float: left; and added a right: 0;

Here's both the html and css.


<!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">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" href="cssprov.css" />



<div id="header">


</div><!--end header-->

<div id="content">

<div id="heading">
<h1>the heading goes here.</h1>
</div><!--end heading-->

<div id="box1">
<h2> This is box one. </h2>
</div><!--end box1-->

<div id="box2">
<h2> This is box two. </h2>
</div><!--end box2-->

<div id="box3">

<h2> This is box three. </h2>

</div><!--end content-->

<div id="footer">
this is the footer.
</div><!--end footer-->



#content {
width: 980px;
background: white;
margin: -1em auto;

#header {
width: 980px;
height: 68px;
clear: both;
background-color: #F20F88;
margin: 2em auto;

#heading {
height: 200px;
clear: both;
background-color: #0FA6F2;
border: 3px solid #F20F88;

#box1 {
float: left;
width: 233px;
height: 350px;
margin-right: 10px;

#box3 {
width: 233px;
height: 350px;
margin-left: 10px;
position: absolute;
left: 954px;
right: 0;
top: 321px;

#box2 {
float: left;
width: 480px;
height: 350px;
overflow: scroll;

#footer {
width: 980px;
height: 40px;
clear: both;
margin: 2em auto;
background: #F20F88;

#box1, #box2, #box3 {
margin-top: 7px;
margin-bottom: 7px;
background: #0FA6F2;
border: 3px solid #F20F88

ul li{
display: inline-block;
float: right;
margin-right: 2.49500998004%;
margin-top: 26px;
margin-bottom: 10px;
padding: 0 10px;
font-size: 13px;
font-family: Georgia, "Times New Roman", Times, serif;

* {
margin: 0;
padding: 0;

#box1 h2{
font-family:"Arial Black", Gadget, sans-serif;


font-size: 13px;