3 column layout with divs built from mysql fetch array

Question

I have a query which returns a dynamic number of records

$query = "SELECT * FROM repository";
$result = mysql_query($query) or die(mysql_error());

and i want to display the results in 3 columns i.e

div 1 | div 2 | div 3
div 4 | div 5 | div 6
div 5 | div 6 | div 7
div 8 | div 9 |

Now as you can see it wont always return an even number of columns and this is where i get a bit lost. Ideally I want to call div 1,4,5 and 8 div class left, div 2,5,6 and 9 div class=middle and 3,6 and 7 div class right so i have a bit more control over styling but i guess just having them all the one class is fine too.

So my div layout that i want to see is something like this:

<div class="left">
   <div class="image">
   <?php echo $row['image']; ?>
   </div>
   <div class="name">
   <?php echo $row['name']; ?>
   </div>
   <div class="user">
   <?php echo $row['user']; ?>
   </div>
   <div class="rating_and_downloads">
   <?php echo $row['rating'] . " - " .  $row['num_downloads']?>
   </div>
   <div class="more_details">
   <a href="www.mysite.com/index.php?id=2">More Details</a>
   </div>
</div>

<div class="middle">  
   <div class="image">
   <?php echo $row['image']; ?>
   </div>
   <div class="name">
   <?php echo $row['name']; ?>
   </div>
   <div class="user">
   <?php echo $row['user']; ?>
   </div>
   <div class="rating_and_downloads">
   <?php echo $row['rating'] . " - " .  $row['num_downloads']?>
   </div>
   <div class="more_details">
   <a href="www.mysite.com/index.php?id=2">More Details</a>
   </div>
</div>

<div class="right">
<div class="image">
   <?php echo $row['image']; ?>
   </div>
   <div class="name">
   <?php echo $row['name']; ?>
   </div>
   <div class="user">
   <?php echo $row['user']; ?>
   </div>
   <div class="rating_and_downloads">
   <?php echo $row['rating'] . " - " .  $row['num_downloads']?>
   </div>
   <div class="more_details">
   <a href="www.mysite.com/index.php?id=2">More Details</a>
   </div>
</div>

I guess the best way is to have the output as above and display it 3 across, then use css to float the left, right and center divs. As you can see above in each cell i display info on a game, each div within the cell would be displayed as a row. So it would something like:

------------------|------------------|------------------|
- heres my image -|- heres my image -|- heres my image -| 
- heres my image -|- heres my image -|- heres my image -|
- heres my image -|- heres my image -|- heres my image -|
- heres my image -|- heres my image -|- heres my image -|
------------------|------------------|------------------|
- street fighter -|- street fighter -|- street fighter -|
------------------|------------------|------------------|
- my_username    -|- my_username    -|- my_username    -|
------------------|------------------|------------------|
- 4.5 - 10.5k    -|- 4.5 - 10.5k    -|- 4.5 - 10.5k    -|
------------------|------------------|------------------|
- more details   -|- more details   -|- more details   -|
------------------|------------------|------------------|

So i know i need to do something like a while loop below and start building the divs, thats simple if i know for example its 3 divs but what if its say 5 results:

while ($row = mysql_fetch_array($result)){

}

But im really lost how ill use the css and how i will deal with the fact i could have a random number of results. I know this is probably ABC stuff but i spent ages googling and im probably using the wrong terms because i can find a lot of similar stuff but nothing that covers this exact situation. Any ideas, a rough example should be enough to get me on my way?

user1547410 · Accepted Answer · 2013-11-17 22:36:17Z

I got it, maybe i should handle the case where there is less than 3 on the final row but this seems to work fine:

                    <?php

                    $query = "SELECT * FROM repository";
                    $result = mysql_query($query) or die(mysql_error());

        $item_num = 0;
        // total number of records
        $num_records = mysql_num_rows($result);
        // loop through the huds
        while ($row = mysql_fetch_array($result)){

            // The first, second and 3rd column have a different class name so i can
            // have more control over the formatting in css

            // If its the first column of 3 write the div left_column class to enter the hud details 
            if ($item_num % 3 == 0){?>
                <div class="left_column"> <?php }
            // If its the second column of 3 write the div middle_column class 
            else if ($item_num % 3 == 1){?>
                <div class="middle_column"> <?php }
            // If its the second column of 3 write the div right_column class 
            else if ($item_num % 3 == 2){?>
                <div class="right_column"> <?php } ?>
                    <div class="image">
                    <?php echo $row['image']; ?>
                    </div>
                    <div class="name">
                    <?php echo $row['name']; ?>
                    </div>
                    <div class="user">
                    <?php echo $row['user']; ?>
                    </div>
                    <div class="rating_and_download">
                    <?php echo $row['rating'] . " - " .  $row['downloads']?>
                    </div>
                    <div class="more_details">
                    <a href="details.php?id=2">More Details</a>
                    </div>
                </div> <?php
                $item_num ++;
            }
        ?>

Then i used this css

.left_column
{
float:left;
width: 30%;
padding: 10px;  
}

.middle_column
{
float:left;
width: 30%;
padding: 10px;          
}

.right_column
{
float:right;
width: 30%;
padding: 10px;
}

Collectives™ on Stack Overflow

3 column layout with divs built from mysql fetch array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related