Div box isn't floating where I want it to - css

Question

I am having problems with floating the boxes on my website where I want them to be.
I want the bottom box "Affiliate Program" placed just under "Your Orders" box. I would really appreciate if someone could tell me what to edit.
Here is the CSS code:
Small left boxes:
.small-white-box {
background-color: #ffffff;
border: 1px solid #d9dee1;
border-radius: 3px;
width: 230px;
min-height: 200px;
float: left;
padding: 10px;
margin-top: 10px;
color: #37a6ef;
}
Big middle box:
.large-white-box {
background-color: #ffffff;
border: 1px solid #d9dee1;
border-radius: 3px;
width: 665px;
min-height: 650px;
float: left;
padding: 10px;
margin-top: 10px;
margin-left: 20px;
font-size: 14px;
}

Answer 1

div.col-white-box
div.small-white-box
......
div.small-white-box
......
div.large-white-box
......
css rules
.col-white-box {
float: left;
width: 252px;
}
.small-white-box {
background-color: #ffffff;
border: 1px solid #d9dee1;
border-radius: 3px;
min-height: 200px;
padding: 10px;
margin-top: 10px;
color: #37a6ef;
}

Answer 2

http://jsfiddle.net/theStudent/c42kU/3/
Let me know if that works for you!
HTML
<div class="content">
<div class="left">
<div class="small-white-box"><h2 class="title">Your Orders</h2></div>
<div class="small-white-box"><h2 class="title">Affiliate Program</h2>
</div>
</div>
<div class="right">
<div class="large-white-box"><h2 class="title">Place Orders</h2>
Test
</div>
</div>
</div>
CSS
.content{
width:100%;
}
.left{
float:left;
width: 230px;
margin: 0 10px 0 0;
}
.right{
float:left;
width: 665px;
}
.large-white-box {
background-color: #ffffff;
border: 1px solid #d9dee1;
border-radius: 3px;
width: 665px;
min-height: 650px;
padding: 10px;
margin-top: 10px;
margin-left: 20px;
font-size: 14px;
float:left;
display:box;
}
.small-white-box {
background-color: #ffffff;
border: 1px solid #d9dee1;
border-radius: 3px;
width: 230px;
min-height: 200px;
float: left;
padding: 10px;
margin-top: 10px;
color: #37a6ef;
}