Les Mizzell wrote > Of course, if you're using CSS for your layouts, this is even > easier and no fancy code wrangling needed: > > <div id="container"> > <cfoutput query="myQUERY"> > <div class="queryCELL">#myQUERY.myOUTPUT#</div> > </cfoutput> > </div> > > > In the most simple form: > Set your "container" div at the desired overall width. > Set your "queryCELL" div at the division you want and float it left. > > So, if the "container" is 600px, you get two columns if > "queryCELL" is 300px, three columns at 200px ... and so on. > > Don't forget your IE float bug, padding and such into > consideration, but hey, it's neat code and it works. Hi Lez. While it sounds good in theory, unfortunately floats are not that simple in reality. They work quite well for layouts and also when you have control over the content, but not always when the content is dynamic. An example of a problem with the code you provided follows:
Lets say your first query cell contains the data "christopher I have the longest name in the world" which wraps inside your queryCELL div, and your second contains "chris" . When the third record gets inserted, it will float left but line up right below your second record (to the right), then the fourth record will do the same depending on its length, and so on and so forth, until you have a mess. Warning - very bad ASCII art follows, and as I am using Outlook at work it may not appear as I desire. ----------------- -------------- | Record 1 | |record 2 | | wrapping | -------------- | and a little | | record 3 | | more wrap | -------------- ------------------ | Record 4 | ------------------ Can you see what's happening? I can, because I've been here before. If this still isn't making sense here is a quick and dirty online example; http://www.cwc.co.nz/sandbox/messy-floats.html In these instances you need to use a row wrapper to _contain_ the querycells, to stop precisely this kind of thing (second example on page above), and then the logic starts to resemble that of Bobby's (which looked good to me), since you need to work out when to close the row wrapper div. I use something similar on the thumb display of a photo gallery. The bare code follows. <cfset rowCount = 1/> <cfoutput query="getRecords"> <cfif rowCount EQ 1> <div class="row-wrap"> </cfif> <!-- .imageborder: begin --> <div class="imageborder"> <a href="path_to_image"> <img src="path_to_image" alt="" height="85" width="85"/> </a> </div> <!-- .imageborder: end --> <cfset rowCount = rowCount + 1/> <cfif rowCount EQ 4 OR getRecords.CurrentRow EQ getRecords.RecordCount> </div> <cfset rowCount = 1/> </cfif> </cfoutput> Obviously this was from a query on a directory and for 3 images per row. It's quite possible there is a better way of working the logic, but it is still required and you get the idea. HTH Mark -- This message has been scanned for viruses and dangerous content by ISPNZ's automated virus detection system, and is believed to be clean. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~| Macromedia ColdFusion MX7 Upgrade to MX7 & experience time-saving features, more productivity. http://www.adobe.com/products/coldfusion?sdid=RVJW Archive: http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:278533 Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
