Images in Div Tags?

ArcGames

Hello, I am trying to get the results from a mysql database and display them into a table like structure but not with a table, instead I want to use DIV tags instead of using a table. I only want to have 1 image per DIV tag. I will have many rows, but I only want 3 columns. I want each row to display as such:

EXAMPLE #1 - Is what I want

Column 1       Column 2       Column 3
Picture1       Picture2       Picture3
Picture4       Picture5       Picture6
Picture7       Picture8       Picture9

The problem is the code I have does not do this, it only displays 3 of my images and no more. Here is my code below (I have included ONLY the pertinent css and and php code that I am using), please help me do what I have asked above, please?

CSS CODE:

.clear{
  clear:both;
}

.galCol{
  float:left; 
  width:110px;
  padding:10px;
}

PHP CODE:

while($row = mysql_fetch_array( $result )) {
  if($i < 3){
   echo'<div class="galCol">
	    <a href="./photos/'.$row['gal_Img_Image'].'" rel="lightbox(BigDC)" title="'.$row['gal_Img_Caption'].'"><img src="./photos/'.$row['gal_Img_Image'].'" alt="" width="100" height="100"/></a>
	    </div>';
   $i += 1;
  }else{
    echo'<div class="clear"></div>';
	$i = 1;
  }
 }

Please help me correct my php code to do as I have asked above, please?

Weedpacket

Well, I wrote this a few years ago; it uses a table instead of <div>s but the principle is exactly the same - three columns is three columns.

Bonesnap

Why use a <div> tag at all? You can do all your styling to the <img> tags themselves. Set the width of your container based on the widths of your images, including any margins and padding (you'll have to do a little math), set the images to float and let the rest take care of itself.

jeepin81

I typically like to use <ul> w/ a display of inline and set the width to 33.333% to accomplish a 3 column layout.

Here's a quick example:

<html>
<head>
<title>3 column layout example</title>
<style>
#bodyWrap{
	width:700px;
	height:auto;
	margin:auto;
}

#listWrap{
	position:relative;	
}

ul.itemList{
	width:680px;
	margin-bottom:10px;
	margin-top:10px;
	overflow:hidden:
	border-top:1px solid #ccc;
}

ul.itemList li{
	line-height:2.5em;
	border-bottom:1px solid #ccc;
	float:left;
	display:inline;
	width:33.333%;
	font-size:12px;
	font-weight:600;
	color:#4B70A3;
	min-height:148px;
	height:auto !important;
	height:148px;
	margin-top:8px;
}
</style>

</head>

<body>


<h1>test layout</h1>
<div id="bodyWrap">
  <div id="listWrap">
    <ul class="itemList">
    <?PHP

//loop through to see data in 3 col layout
for($i=1;$i<33;$i++){
  echo '<li>'.$i.'&nbsp;test</li>';  
}

?>
</ul>
  </div>
</div>
</body>
</html>

You could then place your img(s) inside <li></li> tags... then you'll have the flexibility to change how many columns you want by changing the width:% on the li class. for example change it to 25% for a 4 col layout. etc, etc...