CSS: Increment Top Margin

Question

I'm trying to stagger a div class in a stair type fashion, so it looks like this

1
 2
  3
   4

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.

I attempted to use nth-child 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?

CSS

.process {
    float: left;
    width: 20%;
}

.process:nth-child(1n+2) {
    margin-top: 1em;
}

HTML

<!-- #dprocess -->
<div id="dprocess">


    <!-- .process -->
    <div class="process">

        <p>Name Goes Here</p>

    <!-- /.process -->
    </div>


    <!-- .process -->
    <div class="process">

        <p>Name Goes Here</p>

    <!-- /.process -->
    </div>


    <!-- .process -->
    <div class="process">

        <p>Name Goes Here</p>

    <!-- /.process -->
    </div>


    <!-- .process -->
    <div class="process">

        <p>Name Goes Here</p>

    <!-- /.process -->
    </div>


    <!-- .process -->
    <div class="process">

        <p>Name Goes Here</p>

    <!-- /.process -->
    </div>


<!-- /#dprocess -->
</div>

Answer 1

Have you considered changing the markup?

<div>
    1
    <div>
        2
        <div>
            3
            <div>
                4
                <div>
                    5
                </div>
            </div>
        </div>
    </div>
</div>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    div {
        margin-left: 10px;
    }
</style>

That markup also seems more suited for the job (given the hirarchial structure you want).