Question

I need a way to make a div repeat a certain number (36) of times vertically, with 1px of space between each one. The divs are absolutely positioned, so styling each one individually would be a ton of CSS.

I don’t mind putting 36 divs into the HTML directly, although I’d prefer not to, but styling each one would be inefficient.

Answer 1

How about nest them?

you can nest them with relative positioning or maybe some margin: http://jsfiddle.net/zWbUu/

HTML

div id="container">
    <div class="square">
        <div class="square">
            <div class="square">
                <div class="square">
                    <div class="square">
                        <div class="square"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

​
CSS:

#container {
    position: absolute;
    top: -21px;
    left: 20px;
}
.square {
    background-color: #666;
    width: 20px;
    height: 20px;
    position: relative;
    top: 21px;
}​

If you need some content int them, you can use a nested absolute positioned div or this trick: http://jsfiddle.net/zWbUu/1/

HTML:

<div id="container">1 (doesn't apear)
    <div class="square">2
        <div class="square">3
            <div class="square">4
                <div class="square">5
                    <div class="square">6
                        <div class="square">7</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

​CSS:

#container {
    position: absolute;
    top: -20px;
    left: 20px;
}
.square {
    background-color: #666;
    width: 20px;
    height: 20px;
    line-height: 20px;
    position: relative;
    top: 1px;
    color: #fff;
    text-align: center;
}​