PHP and HTML alignment of database query and image link - php

Question

I would like each entry of a video to be aligned next to each other rather than going under each video. So as with the image example from my current PHP and HTML code below, the parts after "user1" should go to the right and not under (and the same with the rest).
And this is the code that I am now using. I'm using a while loop and I tried fiddling with it for a couple of hours but without success. Could anyone help out please?
include"core/database/connect.php";
$query_pag_data = "SELECT V_TITLE,V_USERNAME from upload LIMIT $start, $per_page";
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
$msg = "";
while ($row = mysql_fetch_array($result_pag_data)) {
$htmlmsg=htmlentities($row['V_USERNAME']);
$msg .= "<a href='index.php'><img src='images/link_pic.png' alt='error' width='128' height='96'></a>" . "<li><b>" . $row['V_TITLE'] . "</b> " . $htmlmsg ."</li>";
}
$msg = "<div class='data'><ul>" . $msg . "</ul></div>"; // Content for Data
And my CSS file:
#container .data ul li{
list-style: none;
font-family: verdana;
margin: 5px 0 5px 0;
color: #000;
font-size: 13px;
}
If I add "display: inline-block;" to my css (.data respectively), this is what I get:
The text description I would like it to be under the black image and not next to it.

Answer 1

When you are displaying the items themselves, this line:
$msg .= "<a href='index.php'><img src='images...
Try putting an id attribute, so it would look like:
$msg .= "<a href='index.php'><img id="nextTo" src='images
Then in your css:
#nextTo{
float: left;
}

Answer 2

Wrap your <img> and the <div> with class .data in a <div> and then add display: inline-block; with some padding(for nice look) to make them come in the same line.
So you code would be now like this:
include"core/database/connect.php";
$query_pag_data = "SELECT V_TITLE,V_USERNAME from upload LIMIT $start, $per_page";
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
$msg = "";
while ($row = mysql_fetch_array($result_pag_data)) {
$htmlmsg=htmlentities($row['V_USERNAME']);
$msg .= "<div class='inline'><a href='index.php'><img src='images/link_pic.png' alt='error' width='128' height='96'></a>" . "<li><b>" . $row['V_TITLE'] . "</b> " . $htmlmsg ."</li></div>";
}
$msg = "<div class='data'><ul>" . $msg . "</ul></div>"; // Content for Data
And your CSS would be:
.inline {
display: inline-block;
}
Or if it's possible then add this to your .data class:
.data {
display:inline-block;
}