Fingeldor Fingeldor - 4 months ago 40
CSS Question

How do I automatically stack divs vertically inside a parent?

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

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>