Nested looping in PHP - layout issues

Question

I have a comment and reply section in a website I'm building. The reply section is set to shift right with a margin-left 10%. But when I test the code it's shifting each reply to the right rather than all the replies shifting together. I'm stuck because the replies are looping inside the comments and I don't know how to fix it. Here is the code...

        // Comments section
        // Get Username and ID from database
        if ($login->isLoggedIn()) {
            $userquery = "SELECT * FROM settings WHERE user_id=$userid";
            $usersql = mysql_query($userquery) or die('SQL Error :: '.mysql_error());
            $userqueryrow = mysql_fetch_assoc($usersql);
            $usercommentname = $userqueryrow['display_name'];
            } else {
            }

        // Posted Comments 
        $commentquery = "SELECT * FROM comments WHERE listing_id=$listingid AND response_to_id='0' ORDER BY comment_ts ASC";
        $commentsql = mysql_query($commentquery) or die('SQL Error :: '.mysql_error());

         if(mysql_num_rows($commentsql) == 0){ 
            echo '<div align="center">No comments have been posted yet.</div>';                        
                } else {    
            while($commentrow=mysql_fetch_array($commentsql))
            {
            // Get comment display name from database
            // Get Username and ID from database
            $commentid = $commentrow['comment_id'];
            $commenterid = $commentrow['user_id'];
            $commenterquery = "SELECT * FROM settings WHERE user_id=$commenterid";
            $commentersql = mysql_query($commenterquery) or die('SQL Error :: '.mysql_error());
            $commenterqueryrow = mysql_fetch_assoc($commentersql);
            $commentername = $commenterqueryrow['display_name'];
            echo '<div class="comment"><a href="mypage.php?user='.$commenterid.'">'.$commentername.'</a> said: '.stripslashes($commentrow['comment']).'';

            if ($login->isLoggedIn()) {
            // Has this user already reported this comment?
            $reportedcommentquery = "SELECT * FROM report WHERE comment_id=$commentid AND reporter_id=$userid AND listing_id=$listingid";
            $reportedcomment = mysql_query($reportedcommentquery) or die('SQL Error :: '.mysql_error());

        if (mysql_num_rows($reportedcomment) > "0") {
            echo '  <span class="small_gray">-Reported and under review-</span>';
            } else {
            echo '  <a href="item.php?item='.$listingid.'&report='.$commentid.'" class="small_graylink">Report</a>';
            }

            echo '</div>';

                // Get responses
                $responsesquery = "SELECT * FROM comments WHERE listing_id=$listingid AND response_to_id=$commentid ORDER BY comment_ts ASC";
                $responsessql = mysql_query($responsesquery) or die('SQL Error :: '.mysql_error());

                 if(mysql_num_rows($responsessql) == 0){ 
                    echo '';                        
                    } else {    
                    while($responsesrow=mysql_fetch_array($responsessql))
                    {
                    // Get responder display name from database
                    $responderid = $responsesrow['user_id'];
                    $responseid = $responsesrow['comment_id'];
                    $responderquery = "SELECT * FROM settings WHERE user_id=$responderid";
                    $respondersql = mysql_query($responderquery) or die('SQL Error :: '.mysql_error());
                    $responderqueryrow = mysql_fetch_assoc($respondersql);
                    $respondername = $responderqueryrow['display_name'];
                    $responderid = $responderqueryrow['user_id'];
                    echo '<div class="response"><a href="mypage.php?user='.$responderid.'">'.$respondername.'</a> said: '.stripslashes($responsesrow['comment']).'';

                    if ($login->isLoggedIn()) {
                        // Has this user already reported this comment?
                        $reportedresponsequery = "SELECT * FROM report WHERE comment_id=$responseid AND reporter_id=$userid AND listing_id=$listingid";
                        $reportedresponse = mysql_query($reportedresponsequery) or die('SQL Error :: '.mysql_error());

                    if (mysql_num_rows($reportedresponse) > "0") {
                    echo'  <span class="small_gray">-Reported and under review-</span>';
                    } else {
                    echo'  <a href="item.php?item='.$listingid.'&report='.$responsesrow['comment_id'].'" class="small_graylink">Report</a>';
                        }
                    }
                    }

                    echo '</div>';
                    echo '<div class="clear"></div>';
                        }
                    }

              // Response form
              if ($login->isLoggedIn()) {
              echo '<div class="responsebox">Respond to this comment:<br /><form id="newresponseto" name="newresponseto" method="post" action="item.php?item='.$listingid.'&comment='.$commentrow['comment_id'].'">
              <textarea name="new_response" cols="43" rows="2">'.$usercommentname.' says:</textarea><br />
              <input type="submit" name="Submit" value="Submit" /></form></div><hr>';
                              } else {
                              }
                }
            }

          // Comment form
          if ($login->isLoggedIn()) {
echo'         <div class="commentbox">Post a comment:<br /><form id="newcommentform" name="newcommentform" method="post" action="item.php?item='.$listingid.'">
            <textarea name="new_comment" cols="50" rows="2">'.$usercommentname.' says:</textarea><br />
            <input type="submit" name="Submit" value="Submit" />
          </form></div>';
          } else {
          echo '<div align="center">Log in to post comments or responses.</div>';
          }

Here is the corresponding CSS..

.comment {
    float: left;
    width: 100%;
    background-color:#CCCCCC;
    margin-bottom: 10px;

}

.commentbox {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

.response {
    float: left;
    background-color:#EDEFF4;
    margin-bottom: 10px;

}

.responsecontainer {
    float: left;
    margin-left: 10%;
    width: 90%;
    margin-bottom: 10px;
}

.responsebox {
    float: left;
    margin-bottom: 10px;
}

Any idea how to keep the nested looping, but force the responses (and actually any subsequent comments) to lay out without also looping the margin-left?

Answer 1

First concatenate you output to get more control over it..

Instead of using echo every time you want to print content:

echo '<div class="response"><a href="mypage.php?user='.$responderid.'">'.$respondername.'</a> said: '.stripslashes($responsesrow['comment']).'';

Center your output in a single variable:

$output = '<div class="response">';
$output .= '<a href="mypage.php?user='.$responderid.'">'.$respondername.'</a> ';
$output .= 'said: '.stripslashes($responsesrow['comment']);
$output .= '</div>';

Answer 2

I don't see in your posted code where you have called the .responsecontainer class, which would set the margin-left 10%.

But the nesting of the responses are because you not closing your <div class="response"> in the while loop, only at the end after you close the loop. So you are going to get a situation like this -

<div class="response"><a href="mypage.php?user=1">user1</a> said: Yes
<div class="response"><a href="mypage.php?user=2">user2</a> said: I agree
<div class="response"><a href="mypage.php?user=3">user3</a> said: Are You Sure?
</div>

So the last 2 would be nested into the 1st <div> rather then directly below.

You need to add the <div class="responsecontainer"> around the response while loop, and then add the </div> inside the loop.

Truncated script-

            // Get responses
            ...
             echo '<div class="responsecontainer">';  // Add <div class="responsecontainer"> to make all responses margin-left 10% as a group 
             if(mysql_num_rows($responsessql) == 0){ 
                ...    

                while($responsesrow=mysql_fetch_array($responsessql))
                {
                // Get responder display name from database
                $responderid = $responsesrow['user_id'];
                $responseid = $responsesrow['comment_id'];
                $responderquery = "SELECT * FROM settings WHERE user_id=$responderid";
                $respondersql = mysql_query($responderquery) or die('SQL Error :: '.mysql_error());
                $responderqueryrow = mysql_fetch_assoc($respondersql);
                $respondername = $responderqueryrow['display_name'];
                $responderid = $responderqueryrow['user_id'];
                echo '<div class="response"><a href="mypage.php?user='.$responderid.'">'.$respondername.'</a> said: '.stripslashes($responsesrow['comment']).'';

                if ($login->isLoggedIn()) {
                    // Has this user already reported this comment?
                    $reportedresponsequery = "SELECT * FROM report WHERE comment_id=$responseid AND reporter_id=$userid AND listing_id=$listingid";
                    $reportedresponse = mysql_query($reportedresponsequery) or die('SQL Error :: '.mysql_error());

                if (mysql_num_rows($reportedresponse) > "0") {
                echo'  <span class="small_gray">-Reported and under review-</span>';
                } else {
                echo'  <a href="item.php?item='.$listingid.'&report='.$responsesrow['comment_id'].'" class="small_graylink">Report</a>';
                    }
                }
                echo '</div>';  // Missing </div> inside while loop
                }

                echo '</div>';  // Ends <div class="responsecontainer">
                echo '<div class="clear"></div>';
                }