Is it possible to align absolute-positioned elements below eachother?

Question

I have this div:

<div class="member">
    <div class="memberImage"><img src="" /></div>
    <div class="memberInfo">John Doe</div>
</div>

This is the css for it:

.member {
    width:200px;
    clear:both;
    position:absolute;
    padding:5px;
}

When I duplicate this div just beneath this one they appear to be one over the other because of the position:absolute.

Is it possible to keep the position:absolute and have them one below the other as normal?

Thanks,

Answer 1

Is it possible to keep the position:absolute and have them one below the other as normal?

Simple answer: no.

Possible solutions:

• Add a top attribute to the member class and increment for every member
• Don't use absolute positioning (probably wisest in this case)

Judging from your code snippet you want to create a memberlist. A simple pattern that would fit well for this is simply an UL (Unordered list):

<ul class="memberlist">
    <li>
        <div class="memberImage"><img src="foo.jpg" /></div>
        <div class="memberInfo">John Doe</div>
    </li>
    <li>
        <div class="memberImage"><img src="foo.jpg" /></div>
        <div class="memberInfo">John Doe</div>
    </li>
    <li>
        <div class="memberImage"><img src="foo.jpg" /></div>
        <div class="memberInfo">John Doe</div>
    </li>
</ul>

And a corresponding CSS to go with it:

.memberlist li {
    width: 200px;
    padding: 5px;
    margin-bottom: 10px;
}