How could I move my comments while keeping replies underneath? - php

Question

I’m trying to create a comment system where users can leave comments and then other users can reply to those comments. I want the actual post to be positioned on the left side of the page and comments on the right side so the user won’t have to scroll past the actual post to read comments. I’ve tried using position: absolute, but then that messes with my replying system. Does anyone know a simpler way to do this?
My Code
while ($commentrow = mysqli_fetch_assoc($commentresult)) {
if (mysqli_num_rows($commentresult)==0) {
echo '';
}
else {
$commenterid = $commentrow['userid'];
$commentersql = "SELECT * FROM users WHERE userid = '$commenterid'";
$commenterresult = mysqli_query($conn, $commentersql);
while ($commenterrow = mysqli_fetch_assoc($commenterresult)) {
echo '<div class="PostComments">';
if ($commenterrow['profileimg'] == 1) {
$filename = "profilepics/profile".$commenterid."*";
$fileinfo = glob($filename);
$fileext = explode(".", $fileinfo[0]);
$fileactualext = $fileext[1];
echo "<div class='CommentProfilePicture'><img src='profilepics/profile".$commenterid.".".$fileactualext."?".mt_rand()."'></div>";
}
else {
echo "<div class='CommentProfilePicture'><img src='profilepics/noUser.png'></div>";
}
echo "<div class='CommentUserName'>".$commenterrow['userName']."</div>";
echo "<div class='CommenterComment'>".$commentrow['comment']."</div> </div>";
}
$currentcommentid = $commentrow['commentid'];
$replysql = "SELECT * FROM posts WHERE hostid = '$hostid' AND postid = '$postid' AND commentid = '$currentcommentid' AND replyid > 0";
$replyresult = mysqli_query($conn, $replysql);
while ($replyrow = mysqli_fetch_assoc($replyresult)) {
if (mysqli_num_rows($replyresult)==0) {
echo '';
}
else {
echo '
<div class="PostReplies">
<p>
'.$replyrow['reply'].'
</p>
</div>
';
}
}
}
}
My Styling
.PostPage {
width: 60%;
padding: 10px;
background-color: #555;
color: white;
margin: 0px;
}
.PostComments {
width: 30%;
background-color: #555;
padding: 10px;
border-radius: 4px;
color: white;
}
.PostReplies {
width: 30%;
background-color: #555;
padding: 10px;
color: white;
}
If you have any questions I will be more than happy to answer them.

Answer 1

Create a div tag over the comments and replies.