View Full Version : Div tag Auto-Position

12-21-2009, 05:45 AM

{This is my first post}

I have a website I'm designing and I need to auto-make divs, Below is a better description of the website and why this would be helpful.

Website Content:
Based On Hobby: Miniature Painting (Little thumb size action-figures)
It allows users to upload an image and add a short description, the website stamps the time, date, and description into a MySQL Database. When this is displayed, it shows the image, then directly below the time and date of upload with the short description beneath. For those who don't know much about miniature painting, you can have thousands of these little guys, but i have decided a cap of 300 - 400 miniatures. I would like 4 miniatures per row, and to auto-position a new div on the desired page when a user uploads a new miniature based on where the last one was positioned. For example, if i have 5 miniatures already submitted, with 4 per row, the next one would be on row 2 at spot 2.

Is there anyway i can achieve this?
Thank You for any support.


12-21-2009, 06:44 AM
mysql, php, while loop.

wrapper div width

thumbnail div width should fit 4 in wrapper with float left.


// Make a MySQL Connection
mysql_connect("localhost", "admin", "1admin") or die(mysql_error());
mysql_select_db("test") or die(mysql_error());

// Retrieve all the data from the "example" table
$result = mysql_query("SELECT * FROM example")
or die(mysql_error());

$result = mysql_query($query) or die(mysql_error());
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<div style="width:600px; height:auto;">
<?php while($row = mysql_fetch_array($result)){ ?>
<div style="width:134px; height:100px; float:left; margin:2px;">
<img src="<?php echo $row['photo'[; ?>" border="0" width="134" height="100" />
<?php } ?>
<div style="clear:both;"></div>