Question

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='color: 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”

Answer 1

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