Is it possible to align elements with an absolute location below each other?

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 below this, they seem to be one above the other due to position:absolute .

Is it possible to save position:absolute and have them under another under another?

Thanks,

Answer 1

Is it possible to maintain a position: absolute and have them one below the other, as usual?

The simple answer is no.

Possible solutions:

• Add top attribute to member class and increment for each member
• Do not use absolute positioning (perhaps in this case, probably the most muddy)

Judging by the code snippet, you want to create a list of participants. A simple template suitable for this is just 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 the appropriate CSS to go with it:

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

Answer 2

Is it possible to save position:absolute and have them one under the other as usual?

Well, well, no, because position:absolute intended to indicate the absolute position for an element.

This means that it will default to the top left corner of the element, which it is absolutely located, and can be placed according to your requirements using the top and left attributes (or bottom and right if you prefer).

You can indicate that two elements have a specific top positioning so that they can be displayed one below the other, which would answer your question, but really what you are asking for is not absolute positioning, therefore position:absolute is inappropriate.

You most likely want, rather than position:relative , which is more like an element with a normally located element, except that you can override it with top and left , etc. This will allow you to do what you want, it sounds like the answer to your question.

Hope this helps.

Answer 3

This is because you used class names, therefore the same style for both, so that both have an absolute position, you can either give them identifiers or use the position: relative