How do I position nested comments in PHP/CSS?

Question

I have comments stored in a database with the post id that the comment is on, the comments id, the comments parent id, and when it was created, the content, etc.. Now I've got a query that will select all of the comments for a particular post and loop through each one displaying it. However, how can I 'indent' the comments to show that they are a child of another comment?

My current idea (somewhat pseudo-code) was to do:

get comments

for each comments as comment {
    if comment has parent
        margin += 16;
        style = margin-left: margin
    else
        margin = 0

    <div class="post" style="<?php echo $style; ?>">
        ...
    </div>      
}

However, this doesn't seem to be working as some of the replies are not positioned correctly, or sometimes don't even position under the parent comment. Am I doing something wrong here, is there a better way to do this?

Actual Code (it's very ugly):

<?php
    $comments = $backend->getCommentsFromPost($post_id);

    $level = 0;
    $margin = 0;

    foreach ($comments as $comment) {
        $author = $backend->getUserById($comment['comment_author_id']);
        $author_name = $author[0]['user_name'];
        $author_id_62 = $backend->to62($author[0]['user_id']);
        $when = $backend->getTimePosted($comment['comment_created']);
        $comment_karma = 2;
        $style = "";

        if ($comment['comment_parent'] != NULL) {
            $margin = $margin + 60;
            $style = "style=\"margin-left: " . $margin . "px;\"";
        }
        else {
            $margin = 0;
        }
    ?>
        <div <?php echo $style; ?> class="post">
            <div class="row">
                <div class="col-md-8">
                    <div class="comment">
                        <p class="comment-data">
                            <a href="profile.php?user=<?php echo $author_id_62;?>"><?php echo $author_name; ?></a> | <?php echo $comment_karma; ?> points | <?php echo $when; ?></p>

                        <?php echo $comment['comment_content']; ?>
                        <p class="comment-footer">
                            <a class='cbtn btn-primary' title='upvote' href='#'><span class='fa fa-arrow-up'></span></a>
                            <a class='cbtn btn-primary' title='downvote' href='#'><span class='fa fa-arrow-down'></span></a>
                            <?php
                                if ($backend->isLoggedIn()) {
                                    $user_id = $_SESSION['user_id'];
                                    $comment_id = $backend->to62($comment['comment_id']); ?>

                                    <a class='cbtn btn-primary' title='post reply' href='comment-reply.php?comment=<?php echo $comment_id; ?>'><span class='fa fa-reply'></span></a>

                            <?php
                                    if ($user_id == $author[0]['user_id'] || $backend->isUserNotPeasant($user_id)) {
                            ?>
                            <a class='cbtn btn-danger' title='delete comment' href="delete-comment.php?id=<?php echo $comment_id; ?>"><span class='fa fa-trash-o'></span></a>
                            <?php
                                    }
                                }
                            ?>
                        </p>                        
                    </div>
                </div>
            </div>
        </div>
    <?php } ?>

Cheers

Answer 1

It should be simply:

<style>
    .post {margin-left: 0;}
    .post div {margin-left: 16px;}
</style>
<div class="post">
    POST HERE
    <div>
        reply
        <div>
            2nd reply
            <div>
                4th level
            </div>
        </div>
    </div>
    <div>
        reply 2
    </div>
</div>
<div class="post">
    another post
</div>

http://jsfiddle.net/4f2wzwne/

Answer 2

You can prepend the comment with any number of   as desired. One per level seems good. Track the level depth of the comment, which you can get from your query, and translate that to number of   to prepend with.

Answer 3

First get comments without parent, then loop in them and get child comments. That will fix your problem I think.