CSS float layout with clear issue

Question

I'm completely new to CSS, and confused as heck, and more or less just getting frustrated with floats, or positions, or anything like that. I'll try and explain best I can

DIV1                 DIV2
DIV3 DIV4       

DIV5   DIV6   DIV7   DIV8
DIV9                 
                     DIV10

So that's the layout i'm looking for. My trial and error's are all messed up. I have Div1:float:left;div2:float:left div3:clear. Everything works upto that point. I want div4 to go right beside div3, and then 5,6,7,8 to clear 3 and 4 and then go all beside eachother. Any thoughts? I would say the hell with it and do fixed positions on everything, but that's getting frustrating trying to figure out positions as well.

I've added in my code here. This has been messed, and played around with. I have height and width variables not because i need them, just playing around trying to make things fit

<style>

#div-1
{
    float:left;
    width:390px;
    height: 170px;

}
#div-2
{
    float:right;
    text-align:right;
    width:450px;
}
#div-3
{
    width:80px;
    height:60px;
    clear:left;
    text-align:left;
}
#div-4
{
    border:dashed 2px;
    float:left;
}
#div-5
{
    float:left;
    top:350px;
}
</style>

Answer 1

Demo: http://jsfiddle.net/iambriansreed/uGRWY/

HTML:

<div class="wrap">
    <div class="DIV1">DIV1</div>
    <div class="DIV2">DIV2</div>
    <div class="DIV3">DIV3</div>
    <div class="DIV4">DIV4</div>
    <div class="DIV5">DIV5</div>
    <div class="DIV6">DIV6</div>
    <div class="DIV7">DIV7</div>
    <div class="DIV8">DIV8</div>
    <div class="DIV9">DIV9</div>
    <div class="DIV10">DIV10</div>
</div>
<pre>
DIV1                 DIV2
DIV3   DIV4
DIV5   DIV6   DIV7   DIV8
DIV9                 
                     DIV10
</pre>

CSS:

.wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #eee;
}
.wrap > div {
    position: relative;
    float: left;
    clear: none;
    background: #ccc;
    width: 25%;
}
.wrap > div.DIV1,
.wrap > div.DIV4 {    
    width: 75%;
}
.wrap > div.DIV9 {    
    width: 100%;
}
.wrap > div.DIV10 {
    float: right;
}

Answer 2

Here is your grid laid out for you, you can see where I added the floats/clears: http://codepen.io/mastastealth/pen/xyeli

HTML:

<div class="main">
  <div class="left">1</div>
  <div class="right">2</div>

  <div class="left clear-left">3</div>
  <div class="left">4</div>

  <div class="left clear-left">5</div>
  <div class="left">6</div>
  <div class="left">7</div>
  <div class="left">8</div>

  <div class="left">9</div>
  <div class="right clear-left">10</div>
</div>

CSS:

.main { width: 800px; }

.main div { 
  background: #abc123; text-align: center;
  line-height: 50px; width: 200px; 
  box-shadow: inset 0 0 1px #000;
  margin-bottom: 10px;
}

div.left { float: left; }
div.right { float: right; }

div.clear-left { clear: left; }