I want to display records from my database in div and in a grid format using php. I want to set it to display 3 items in a row and then create another row and then display another 3 items continuously until the set limit but unfortunately only one item is showing. Seems there is something wrong with the php code somewhere which i don't know. Please someone should help me figure it out. The code is below

//for image upload


$mysqli = new mysqli('localhost', 'root', '','auction');
$item_name = $mysqli->real_escape_string($_POST['item_name']);
$item_description = $mysqli->real_escape_string($_POST['item_description']);
$item_image_path = $mysqli->real_escape_string('Images/item_img/'.$_FILES['item_image']['name']);

//make sure file is of image type
if (preg_match("!image!", $_FILES['item_image']['type'])) {
    if (copy($_FILES['item_image']['tmp_name'], $item_image_path)) {
        $_SESSION['item_name'] = $item_name;
        $_SESSION['item_description'] = $item_description;  
        $_SESSION['item_image'] = $item_image_path;
        $sql = "INSERT INTO items (item_name, item_image, item_description)
                VALUES('$item_name', '$item_image_path','$item_description')";
        if ($mysqli->query($sql) === true) {
            $_SESSION['message'] = "Item Upload Successful!";
        else {
            $_SESSION['message'] = "file upload failed";

        $_SESSION['message'] = "file copying failed";
     else {
    $_SESSION['message'] = "please upload gif, jpg, png";


?> <?php
$result = $mysqli->query("SELECT * FROM items ORDER BY rand() LIMIT 10")
or die($mysqli->error);

?> <html> <head> <title>Upload item</title> <link rel="StyleSheet" href="Bootstrap/css/bootstrap.main.css"> <link rel="StyleSheet" href="Bootstrap/css/bootstrap.min.css"> <link rel="StyleSheet" href="style.css"> <!--for countdown timer--> <script>
var seconds = 60*60;
function secondPassed() {
var minutes = Math.round((seconds - 30)/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
    remainingSeconds = "0" + remainingSeconds;  
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
    document.getElementById('countdown').innerHTML = "Buzz Buzz";
} else {

var countdownTimer = setInterval('secondPassed()', 1000);
</script> </head> <body> <div> <!--to display records from database--> <div class = "row c-head mar-pad"> <?php
                while ($auction = $result->fetch_assoc()):?> <?php
                if ($A%3==0):?> <div class = ""> <h4><?=$auction['item_name']?></h4> <img src='<?=$auction['item_image']?>' class='img-responsive'> <span id="countdown" class="timer">how</span> <button class ="c-button" name ='bid'>Bid Now!</button> </div> <?php $A++;?> <?php endif;?> <?php endwhile;?> </div> <!--for file upload form--> <form class="form-horizontal" role="form" action="auction_upload.php" method="POST" enctype="multipart/form-data"> <h1><?=$_SESSION['message']?></h1> <div class=" form-group"> <label class="control-label col-sm-2">Item Name:</label> <div class="col-sm-8"> <INPUT type="text" class="form-control" name="item_name" required/> </div> </div> <div class="form-group"> <label class="control-label col-sm-2">Item Image:</label> <div class="col-sm-8"> <INPUT type="file" class="form-control" name="item_image" accept="image/*" required/> </div> </div> <div class="form-group"> <label class="control-label col-sm-2">Item Description:</label> <div class="col-sm-8"> <textarea class="form-control" name="item_description" required>
3 Months
Discussion Span
Last Post by ernest_5

$A need to incremented after endif; but print whatever

    while ($auction = $result->fetch_assoc()):
        if ($A%3==0): ?><br/><?php endif;
        <div style="float:left;">
            <img src="<?=$auction['item_image']?>" class="img-responsive">
            <span id="countdown" class="timer">how</span>
            <button class="c-button" name='bid'>Bid Now!</button>

Edited by AndrisP

Votes + Comments
Increment +1.

it's displaying multiple items in a grid form quite ok but just two in a row and in an uneven form. i guess it's because of the CSS float attribute which can float only two items in a row. I want to display more than one item in a row...say 4 items in a row. Please how can i fix this?

Edited by ernest_5


Define in css float:left; sizes max-width and max-height
use it class instead of style="float:left;"

Edited by AndrisP


It works! Though the sizes are uneven even as i have defined them. I guess i have to continue tweaking them. Thanks so very much.

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.