posts overlapping - php

Question

Now i dont know if this is simple or hard. If its just css or php code i need
But basically i have posting system and users can comment on posts. In the comments page it shows orginal post and one users have left (the comments)
I had one in there and this was fine but i added another and it looked like this...
[1]: http://i.stack.imgur.com/2fIXd.jpg
As you can see its completly different! Heres my code for it...
<?php
mysql_connect("localhost", "root", "");
mysql_select_db("test");
echo "<a href='Untitled9.php'>Go Back...</a>";
?>
<br/><br/>
<div class="message">
<?php
$sql = mysql_query("SELECT * FROM threads WHERE id = '".
mysql_real_escape_string($_GET['id']) . "'") or die(mysql_error());
while($r = mysql_fetch_array($sql)) {
$posted = date("jS M Y h:i",$r['posted']); echo "".$r['author']." $posted"; ?>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-text="<?php echo "".$r['message'].""; ?>">
Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<div class="message2"><?php echo " ".$r['message'].""; ?></div>
<?php echo "Likes: ".$r['votes_up']." "; echo "Dislike: ".$r['votes_down']."";>
</div>
<br/>
<hr width="725px">
<?php
echo "<h3>Replies...</h3>"; ?>
<div class="message"><?php
$sql = mysql_query("SELECT * FROM replies WHERE thread = '".
mysql_real_escape_string($_GET['id']) . "'") or die(mysql_error());
while($r = mysql_fetch_array($sql)) {
$posted = date("jS M Y h:i",$r['posted']); echo "".$r['author']." $posted"; ?>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-text="<?php echo "".$r['message'].""; ?>">
Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<div class="message2">
<?php echo " ".$r['message']."" ; } ?> </div>
</div>
<hr width="725px">
<form action="newreply.php" method="POST">
Your Name: <input type="text" name="author">
<input type="hidden" value="<?php echo $_GET['id']; ?>" name="thread"><br>
Message:<br><textarea cols="60" rows="5" name="message"></textarea><br>
<input type="submit" value="Post Reply">
</form>
The code looks really messy on here. I tried editing but couldnt get much better.
So bascially what i want to know is how do i prevent this (the overlapping) from happening?
Edit * CSS
.message {
width: 500px;
color: black;
background: white;
padding:8px;
border:1px solid white;
margin:5px auto;
-moz-border-radius:8px;
}
.message2 {
background-color: grey;
}
It looks to me as though everything is posting inside the second php function but i have some code pretty much the same for just the individual post and this displays normally i.e. as many as i want. Im just wondering is there something i need to add/change

Answer 1

Wrong (Your code):
<?php echo " ".$r['message']."" ; } ?> </div>
</div>
Correct:
<?php echo " ".$r['message']."" ; ?> </div>
</div>
<?php } ?>
You were opening multiple DIVs in your while loop but only closing two.

Answer 2

Similarly to Cobra_Fast's reply, it seems that the positioning of your divs seemed to be causing the problem, and also the position of your while loop.
Try replacing the replies section with the following and let me know if it is any better.
<?php
echo "<h3>Replies...</h3>";
$sql = mysql_query("SELECT * FROM replies WHERE thread = '".mysql_real_escape_string($_GET['id']) . "'") or die(mysql_error());
while($r = mysql_fetch_array($sql)) {
?>
<div class="message">
$posted = date("jS M Y h:i",$r['posted']);
echo $r['author']." ".$posted;
?>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-text="<?php echo $r['message']; ?>">
Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<div class="message2">
<?php
echo " ".$r['message'];
?>
</div>
<?php
}
?>