user1759742 user1759742 - 2 months ago 6x
CSS Question

Displaying Image/Description from mySQL table using PHP

my php link to database:

My guess at how to show images from mysql database:

what I want it to look like:
(unable to post 3 hyperlinks, pls change xx to tt)

Please view the three pictures above in that order.

I can connect & display my database by using an 'include displayitems.php', however, I want to display the images from my database in row of 4 rows of 3 columns.

How do I do this?

I'm getting really confused.


<div id='overall'>
$query = "select * from UFPProducts";
$result = mysql_query ($query, $connect);

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


    <div class='container'>
        <div class="image">
            <?php echo "<img src='".$row['Image']."' />"; ?>
        <div class="text">
            <?php echo "<p>".$row['Description']."</p>"; ?>




 <style type="text/css">

 #overall {width:480px;}
 .container {width:100px; height:150px; float:left; display:inline; margin: 0px 10px; }
 .image {width:100px; height:100px;}
 .text {width:100px; height:50px;}


The "margin: 0 10px;" is basically saying have no margins on the top or bottom, but have 10px on each side of the container. This means that the container div will be 100px wide still, with 10px of margin (spacing) on each side, therefore making it 100px + 20px wide.

So if you still want 4 in each row; 120px x 4 = 480px. Thus, 480px is the size of the 'overall' container.