9 replies [Last post]
vavroom
Offline
Enthusiast
Aotearoa / New Zealand
Last seen: 13 years 19 weeks ago
Aotearoa / New Zealand
Joined: 2003-07-19
Posts: 75
Points: 0

Hello all,

I hope you'll have an idea or three for me. I've looked around, but seem to miss the answer Sad

I'm working on a system that dynamically retrieves content from a database. One of the option users have is to have the content displayed in one, or two columns. Currently this is handled by tables (before my time...), I'm working on getting things moved to tableless.

So now, each element is generated in a <div>. If the user selects to display in one column, I style that div to 100%. If they select 2 columns, I style the div to 50% width and float:left.

Then I throw a clearing div after every 2nd item.

So far so good.

Except that if there is 5 items to display, or 7... Each pair displays properly, but the content after the last one is loaded beside it (well, doh, it's floated, of course it will!).

I can't apply styling to the element that comes after that last item, as there are too many variables and it can't be determined which one would be displayed there.

I *can* add an element after the last one and style that.

I tried adding the same <div style="clear:both"> as between each pair, but that didn't work.

I feel I'm missing something big to make it happen, but I can't see what.

For example, say the output looks like this:

<div class="text"><p>lorem...ipsum</p></div
<div class="text"><p>lorem...ipsum</p></div
<div class="clr"></div>

<div class="text"><p>lorem...ipsum</p></div
<div class="text"><p>lorem...ipsum</p></div
<div class="clr"></div>

<div class="text"><p>lorem...ipsum</p></div
<div class="clr"></div>

<div id="moretext"><p>bla bla...yadayada</p></div>

And the css:

.text {
width:50%;
float:left;
}

.clr {
clear:both;
height:0;
}

.moretext gets displayed to the right of the last div.text. I need it *below* it.

Any thoughts? Thanks in advance

Nic
"A community that excludes even one of its members is no community at all" - Dan Wilkins

velo
velo's picture
Offline
Enthusiast
Fayettenam
Last seen: 11 years 2 weeks ago
Fayettenam
Timezone: GMT-5
Joined: 2004-11-11
Posts: 181
Points: 0

[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

Give a man a fire and he will be warm for a while. Set a man on fire and he will be warm for the rest of his life.

vavroom
Offline
Enthusiast
Aotearoa / New Zealand
Last seen: 13 years 19 weeks ago
Aotearoa / New Zealand
Joined: 2003-07-19
Posts: 75
Points: 0

[SOLVED]Dynamically generated elements, floats and clearing?

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.

Nic
"A community that excludes even one of its members is no community at all" - Dan Wilkins

velo
velo's picture
Offline
Enthusiast
Fayettenam
Last seen: 11 years 2 weeks ago
Fayettenam
Timezone: GMT-5
Joined: 2004-11-11
Posts: 181
Points: 0

[SOLVED]Dynamically generated elements, floats and clearing?

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.

Give a man a fire and he will be warm for a while. Set a man on fire and he will be warm for the rest of his life.

vavroom
Offline
Enthusiast
Aotearoa / New Zealand
Last seen: 13 years 19 weeks ago
Aotearoa / New Zealand
Joined: 2003-07-19
Posts: 75
Points: 0

[SOLVED]Dynamically generated elements, floats and clearing?

velo wrote:
.

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

Nic
"A community that excludes even one of its members is no community at all" - Dan Wilkins

vavroom
Offline
Enthusiast
Aotearoa / New Zealand
Last seen: 13 years 19 weeks ago
Aotearoa / New Zealand
Joined: 2003-07-19
Posts: 75
Points: 0

[SOLVED]Dynamically generated elements, floats and clearing?

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!

Nic
"A community that excludes even one of its members is no community at all" - Dan Wilkins

velo
velo's picture
Offline
Enthusiast
Fayettenam
Last seen: 11 years 2 weeks ago
Fayettenam
Timezone: GMT-5
Joined: 2004-11-11
Posts: 181
Points: 0

[SOLVED]Dynamically generated elements, floats and clearing?

vavroom wrote:
velo wrote:
.

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

it was a bad click, sorry. edited

Give a man a fire and he will be warm for a while. Set a man on fire and he will be warm for the rest of his life.

vavroom
Offline
Enthusiast
Aotearoa / New Zealand
Last seen: 13 years 19 weeks ago
Aotearoa / New Zealand
Joined: 2003-07-19
Posts: 75
Points: 0

[SOLVED]Dynamically generated elements, floats and clearing?

No worries on the bad click. Smile

velo wrote:
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.

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 Smile

Thanks a bunch for your assistance Smile

Nic
"A community that excludes even one of its members is no community at all" - Dan Wilkins

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 28 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

[SOLVED]Dynamically generated elements, floats and clearing?

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.

vavroom
Offline
Enthusiast
Aotearoa / New Zealand
Last seen: 13 years 19 weeks ago
Aotearoa / New Zealand
Joined: 2003-07-19
Posts: 75
Points: 0

[SOLVED]Dynamically generated elements, floats and clearing?

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

Nic
"A community that excludes even one of its members is no community at all" - Dan Wilkins