[SOLVED]Dynamically generated elements, floats and clearing?

I've solved problems like this in the past by using a while loop with a counter variable that increments to a certain point and then resets. Here is code I created to dynamically create a thumbnmail gallery no matter the amount of thumbnails. The language is PHP. The thumbs appear 5-across before a new table row is created. Perhaps something similar for yours where you set the class of your div tgas based on the order in which they are created. This would require your div creation to be placed in the server-side scripting but it works swimmingly when applied corrctly.

FYI- I created this script before I knew about CSS so no one yell at me about tables and font tags!!!!!!

while($file=readdir($dir))
	{
	$caption=str_replace("_", " ", $file);
	$caption=str_replace("_small", "", $caption);
	$caption=str_replace(".jpg", "", $caption);
	$caption=str_replace(".JPG", "", $caption);
	if($file=="." || $file=="..")
		{next;}
	else
			{
		if($counter==0)
			{
			print("<tr>");
			}
		print("<td><font face=tahoma size=2><a style=\"cursor:hand; cursor:pointer;\" onClick=\"changePic('".$gallery."/images/$file')\"><img src=".$gallery."/thumbnails/$file border=0></a><br>$caption</td>");
		$counter++;
		if ($counter==5)
			{
			print("</tr>");
			$counter=0;		
			}
		}
	}

Take note of what occurs when $counter equls 0 and when it equals 5. If you set your variable such that your code creates a div of an uncleared class when the variable is 0 and then it creates a div with the clearing in the class declaration when the variable is 1, it should work. When the script finishes the iteration where the cleared div is created, the variable is reset and you have another row if divs.....

also, try eliminating the empty div and having the second div clear. I never have good luck getting empty divs to do anything right

Thanks for your response velo,

I'm already doing something similar.

// intro story output
	for ( $z = 0; $z < $intro; $z++ ) {
		if ( $i >= $total ) {
			// stops loop if total number of items is less than the number set to display as intro + leading
			break;
		}

		// outputs either intro or only a link
		if ( $z < $intro ) {
			echo '<div class="col_div'.$columns.'">';
			show( $rows[$i], $params, $gid, $access, $pop, $option, $ItemidCount );
			echo '</div>';
		} else {
			break;
		}

		if ( !( ( $z + 1 ) % $columns ) || $columns == 1 ) {
			echo '<div class="clr"></div>';
                }

		$i++;
	}

The problem I'm dealing with here is that if I have an odd number of divs, I'm left with one float occupying 50% of the space, and the content below gets moved to the side.

Re the empty clearning div, it's not proven to be a problem with me, and within context, it's really the only way to achieve this that I can think of.

You've already got something close to what you need. While I don't get all of your code because I don't know where all the variables are derived from, you are using a modulus operator to determin when the cleared div is echoed. Simply add another conditional statement that will only run at the end of the for loop. It looks as if you are left with the fsingle problematic div when the loop is on an even number but when it's incremented at the end you move to an odd number. So, if we check to see if the conditional variables for the loop are at a state that will end the loop AND if the variable is odd, then the code creates a final cleared div-

Example-

//within the for loop after the final variable is incremented

if ($z >= $intro && (($z % 2) ==  1 )){
      echo '<div class="clr"></div>'; 
}//end if

If the counter variable $z and the contorl variable $intro are equal or if $z is greater (which won't happen but I've had issues in the past using == in this type of situation and the greater/less than or equals operators seem to work more consistently) and if the number of loops is ODD (divide the number of loops by 2 and if there is a remainder of 1 the number was odd) then the code will execute.

Now, if the control variable could possibly be one and limit the number of loops to one you can still use this code as the modulus operator will still return a value of 1 if the equation works out to be "1 % 2"

This is my best guess not seeing all the code.

Huh? What do you mean by "."?????

Sometimes, you stare at one part of the problem so long that you don't see the entire big picture.

I didn't have a problem to start with... Other than brainfarting! LOL.

I hadn't declared the css for .clr Doh!

Huh? What do you mean by "."?????

it was a bad click, sorry. edited

No worries on the bad click.

Ayup, that's what I ended up doing. Just had to work through that bit.

if ( $intro % $columns ) {
				echo '<div class="clr"></div>';
			}

Got me straigthened out

Thanks a bunch for your assistance

You may also be interested in the "clearfix" technique created by this forums owner. Also an overflow style other than the default will when combined with a height setting of auto (the default) force the container to surround its floats. Both of these techniques avoid the necessity for the extra markup of a clearing div.

Thanks Chris, I'll ponder this. Dropping the clearing div altogether is appealing but I'd need to change my code to deliver a different class for the first, and second floated elements.

To complicate matters, the class gets determined dynamically by a user setting where they can set 1, 2, 3, x columns. Which means the code would then need to take that into account.

I think for now, I'll leave that be and continue using this method. My "fix" is a temporary one and we're having to re-build the code anyway. At that time, we'll look into this technique a little closer (bookmarked the page!)

Cheers