Q:

CSS: How to clear a floating object only one level, not the all the way to the left?

Im not sure if im describing this correctly.
I want an object among all floating objects to clear but not all the way to the left.
JSfiddle

#parent {
  background: greenyellow;
  width: 500px;
  height: 700px;
  padding: 15px;
}
#parent>div {
  float: left;
}
#object1 {
  width: 40px;
  height: 300px;
  background: blue;
}
#object2 {
  width: 100px;
  height: 100px;
  background: red;
}
#object3 {
  width: 100px;
  height: 100px;
  background: purple;
}
<div id="parent">

  <div id="object1">


  </div>
  <div id="object2">

  </div>
  <div id="object3">
  </div>

</div>

As in, in the jsfiddle. I want the purple box to come below red box.
And no i dont want to reduce my parent's width.
And i dont want to contain red and purple inside a div.
Is there way for it.
Thanks?

A:

Set lower width to parent, 
#parent {width: 200px;}

http://jsfiddle.net/db0xacps/1/
Or wrap right elements, styles will be the same as you have.
<div id="parent">
     <div id="object1"></div>  
     <div>
         <div id="object2"></div>
         <div id="object3"></div>
    </div>
</div>

http://jsfiddle.net/db0xacps/2/

