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

Because you have a very limited set of elements it is okay to use copypasting:

http://jsfiddle.net/C4TWc/1/

HTML:

<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>

CSS:

div {
    float: left;
    width: 20%;
}

div:first-child + div { margin-top: 2em; }
div:first-child + div + div { margin-top: 4em; }
div:first-child + div + div + div { margin-top: 6em; }
div:first-child + div + div + div + div { margin-top: 8em; }
div:first-child + div + div + div + div + div { margin-top: 10em; }