Divs are overlapping on accident

I have posts that are echoed out of my mysql database. If there is more than one, they are echoed in separate divs in order of decreasing rank number (taken from DB). However, when the divs are echoed, the all overlap on the top. I believe this is a CSS problem. The thing is that each div has several sub divs. I think the "position" attribute might have contributed to this. I would like for each div to be echoed out with about 100px between each one. Thanks.

CODE:

$post = array();
$f=0;
while ($row=mysql_fetch_assoc($g)){
  $post[]=$row['post'];

  echo "<div id='area'>";
  echo "<div id='badge'><span style='col开发者_如何学Cor: gray;'>Answered by:</span>";
  include 'badge.php';
  echo "</div>";
  echo "<div id='areapost'><pre>$post[$f]</pre></div>";
  $f++;
}
echo "</div>"; /*end area*/

CSS CODE:

#area {
  background-color: #fff;
  border: 1px solid red;
  width:500px;
  height: 300px;
}

#badge{
  position: absolute;
  top: 0px;
  left: 0px;
}

#areapost{
  position: absolute;
  top: 0px;
  right: 0px;
  height: 300px;
  width: 380px;
  background-color: #E0E0E0;
  overflow: -moz-scrollbars-vertical;
  overflow-x: hidden;
  overflow-y: scroll;
}

The "area" is the entire post container. The areapost and badge are elements inside "area"

All elements in the page must have a unique id, otherwise you get unexpected behavior. Fix this, and see where it puts you.

Try moving the opening "area" div tag out of the conditional:

 while ($row=mysql_fetch_assoc($g)){
    $post[]=$row['post'];
    echo "<div id='area'>";

should be:

echo "<div id='area'>";
while($row=mysql_fetch_assoc($g)){
     $post[]=$row['post']

since you want area to contain everything else

You almost always need to open and close divs at the same level of looping. Here you are opening the <div id='area'> inside the while loop and closing it outside the while loop. They need to either both in, or both out. Also, your id's ought to be unique, over your whole page, else you should be using classes on those divs.

You also need to not position all these areas absolutely. I've added a content div around everything. Position this absolutely, and the area class relatively. You don't need the styling on #area, change it to .area.

$f=0;

echo "<div id='content'>"
while ($row=mysql_fetch_assoc($g)){
  $post[]=$row['post'];

  echo "<div id='area-'" + $f + " class='area'>";
  echo "<div class='badge'><span style='color: gray;'>Answered by:</span>";
  include 'badge.php';
  echo "</div>";
  echo "<div class='areapost'><pre>$post[$f]</pre></div>";
  echo "</div>"; /*end area*/

  $f++;
}
echo "</div>"

also try using relative positioning, with 100px space on each. this way each div will be spaced relative to the previous div, rather than one spot, causing them to overlap.