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,

Answer 1

Div elements are block elements, which means that they will take a full row and that any element next to them will skip a line. Just do:

<div></div>
<div></div>
<div></div>

If that does not work, you probably need to put them in display: inline-block;

Answer 2

You can give margin to inner div.

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

Answer 4

Just remove absolute positioning. Center the divs using margin:auto and then provide whatever vertical margins you like.

Answer 5

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 6

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.