How to display comments inline

Question

So I have this code (which works) that prints out the comments a user has just written. The issue im having is with displaying the comments. The username is displayed above the comment and I just want them to be displayed next to each other for example

'Username:'comment''

I have tried putting display:inline; in my CSS for h4 and p but it messes up everything else that i have put into these elements.

Does anyone know the answer?

This is my code

 //Print out existing comment
    $query = "SELECT * FROM comments JOIN users ON comments.userID = users.ID WHERE salonID=$salonid"; 
    $result = mysqli_query($db_server, $query);
    if (!$result) die("Database access failed: " . mysqli_error($db_server));
    while ($row = mysqli_fetch_array($result)){
            $str_comments .= "<div id='comments'><h4>" . $row['Username'] ."</h4><p>'" . $row['comment'] . "'</p>";
            $str_comments .="<img src='" . $row['imagename'] ."' /></div>";
    }

Answer 1

You put username inside <h4></h4> which is a block element. It's the same for <p></p> .

Block element will take a full row so you won't be able to place username & comment in a line.

You already give display:inline style for <h4></h4> & <p></p> it should be fine.

I encourage you to use a <span></span> instead which is an inline element by default.

Focus on this:

while ($row = mysqli_fetch_array($result)){
  $str_comments .= "<div id='comments'>" . 
                   "<span style='font-weigth:bold;'>" . $row['Username'] ."</span>" .
                   "<span>'" . $row['comment'] . "'</span>" . 
                   "<img src='" . $row['imagename'] ."' />".
                   "</div>";
}

Answer 2

The easiest way to do it on your website is use annote ( http://annote.in ). A javascript based inline comment plugin. You can get started on any platform in minutes.