How do I automatically stack divs vertically inside a parent?

Question

Here's what I am trying to accomplish...

1. "parent" has position:relative
2. "div 1-3" have position:absolute

However, whenever I do this, I find myself having to assign specific "top" values in my CSS. So div 1 might be top:50px, div 2 would be top:150px, and div 3 would be top:225px;

Is there a way to make sure the divs continue to stack inside the parent without assigning top values and/or absolute positioning?

Answer 1

A div should already display as a block and take up a full "row". Here is some HTML and CSS to give an example, compare it to your code:

http://jsfiddle.net/mWcWV/

<div id="parent">      <div class="child">Foo</div>     <div class="child">Bar</div>     <div class="child">Baz</div>  </div> 

Answer 2

Should be straight:

HTML:

<div class="container">     <div class="red"></div>     <div class="blue"></div>     <div class="green"></div> </div> 

CSS:

.container {     position: relative;     width: 500px;     height: 500px;     background-color: #ffbf00; } .red {     background-color: #f00;     width: 200px;     height: 150px;     margin: 5px auto; } .blue {      background-color: #0f0;     width: 200px;     height: 150px;     margin: 5px auto; } .green {     background-color: #00f;     width: 200px;     height: 150px;     margin: 5px auto; } 

Check this fiddle.