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.
HTML:
<!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=UTF-8" />
<title>WorkArea</title>
<link rel="stylesheet" type="text/css" href="cssprov.css" />
</head>
<body>
<div id="header">
<ul>
<li>contact</li>
<li>facebook</li>
<li>home</li>
<li>about</li>
</ul>
</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><!--box3-->
</div><!--end content-->
<div id="footer">
<p>
this is the footer.
</p>
</div><!--end footer-->
</body>
</html>
CSS:
#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;
color:#232323;
font-size: 13px;
line-height:21px;
}