csshtmlpositionparent

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?

Solution

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