title: CSS: Increment Top Margin
body: <p>I'm trying to stagger a div class in a stair type fashion, so it looks like this</p>
  
  <pre><code>1
   2
    3
     4
  </code></pre>
  
  <p>Edit: I want to change the top margin so each placement of the .process div is lower than the one before it. I have them floated so they'll sit side by side, but I'd also like each div to sit lower than the last.</p>
  
  <p>I attempted to use <code>nth-child</code> which, of course, just added the top margin to all of the elements because it started counting at the first element and simply added the set margin to all of the divs. I know you can create a counter using CSS, but can you increment a margin using CSS?</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.process {
      float: left;
      width: 20%;
  }
  
  .process:nth-child(1n+2) {
      margin-top: 1em;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!-- #dprocess --&gt;
  &lt;div id="dprocess"&gt;
  
  
      &lt;!-- .process --&gt;
      &lt;div class="process"&gt;
  
          &lt;p&gt;Name Goes Here&lt;/p&gt;
  
      &lt;!-- /.process --&gt;
      &lt;/div&gt;
  
  
      &lt;!-- .process --&gt;
      &lt;div class="process"&gt;
  
          &lt;p&gt;Name Goes Here&lt;/p&gt;
  
      &lt;!-- /.process --&gt;
      &lt;/div&gt;
  
  
      &lt;!-- .process --&gt;
      &lt;div class="process"&gt;
  
          &lt;p&gt;Name Goes Here&lt;/p&gt;
  
      &lt;!-- /.process --&gt;
      &lt;/div&gt;
  
  
      &lt;!-- .process --&gt;
      &lt;div class="process"&gt;
  
          &lt;p&gt;Name Goes Here&lt;/p&gt;
  
      &lt;!-- /.process --&gt;
      &lt;/div&gt;
  
  
      &lt;!-- .process --&gt;
      &lt;div class="process"&gt;
  
          &lt;p&gt;Name Goes Here&lt;/p&gt;
  
      &lt;!-- /.process --&gt;
      &lt;/div&gt;
  
  
  &lt;!-- /#dprocess --&gt;
  &lt;/div&gt;
  </code></pre>