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?

Solution 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>

Solution 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.

Solution 3

In css file use...

div
{
    display : block;
}

Which will give a break line for each div block and that feature is by default and don't use relative - absolute technique.