Q:

"Stair-step" sibling elements with CSS

Without JavaScript, is it possible to create a flowing stair-step cascade of elements? 
Meaning:
[1]
   [2]
      [3]
         [.]

So on and so forth for any number of elements. 
I'm working with the markup something like this:
<div id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

By flowing, I mean it doesn't matter how many elements I have in the steps, it will just work - so no absolute positioning per individual elements, or making each one have progressively more margins (unless there's some way to do that perpetually in css I don't know of). 
Also, no infinite child elements - an acceptable solution could have more elements mixed in if necessary, but the boxes should not be children of each other. 
Fixed sizes are okay, though flexible is preferred. 
I do have a pen going here, but no success yet. 

A:

Thanks to @Banzay for the link, I worked it out using a child element that floats, and added another layer of containment to the content as an inline-block element. 

*{border-width:0;margin:0;padding:0;box-sizing:border-box;}

#con{
  margin:50px;
  background:#acc;
}
#con>div{
  position:relative;
  background:#ccd;
  height:50px;
}
#con>div:before {
    float: left;
    content: "\00a0";
    width: 50px;
    height: 51px;
}
#con>div>div{
  display:inline-block;
  height:50px;
  width:50px;
  background:#000;
  color:#fff;
}
<div id="con">
  <div><div>1</div></div>
  <div><div>2</div></div>
  <div><div>3</div></div>  
  <div><div>4</div></div>  
  <div><div>5</div></div>  
</div>

