My issue lies in pulling data from a database to display on my website. I have three keys/attributes (columns) - PostedDate, DataImage, and Source that need to be shown together in one div with the posted date at the top, image in the middle, and source at the bottom. While I have achieved this, I now need to loop over these 3 columns and create a new row after every set of 3 columns to avoid displaying them all as one big column or row.
The desired layout should look like this:
https://i.sstatic.net/7HJFg.jpg
However, whenever I try to refresh the webpage, it gives me a 404 or 500 error due to my current code:
<!--- Set the number of columns you want to have --->
<cfset cols = 3>
<cfset totalRows = ceiling(UIData.RecordCount / cols)>
<cfset output = 1>
<table width = "100%" border="0" align="center" cellpadding="2" cellspacing= "2">
<cfloop from = "1" to = "#totalRows#" index = "thisRow">
<tr>
<cfloop from = "1" to = "#cols#" index = "thisCol">
<td width = "<cfoutput>#numberformat((100/cols), 99)#</cfoutput>%" align="center" nowrap style = "border: 1px solid #ccc;">
<cfif output != UIData.recordCount>
<cfoutput>
<div> <font style="font-size: .8em; line-height: .6em; padding-bottom: .8em;"><strong> #PostedDate# </strong></font> </div>
<div> <img src="http://www.iowalum.com/uidata/images/#DataImage#" alt="" width="99%" height="264" style="padding-top:10px; padding-bottom:10px;" /> </div>
<div id ="text"> #Source# </div> </cfoutput>
<cfelse>
<!--- Use <br> to display an empty cell --->
<br>
</cfif>
<!--- Increment counter for the next record --->
<cfset output = output + totalRows>
</td>
</cfloop>
<!--- Set start position for the next row --->
<cfset output = thisRow + 1>
</tr>
</cfloop>