Forcing a clear

[Guest Brandon!]

I need to force a clear after every 3rd product in my template, but I couldn't figure it out using the template system.

Currently, my template is this:

		<!-- BEGIN: products -->

			<div class="product-container">

				<a href="index.php?_a=viewProd&amp;productId={PRODUCT_ID}">

					<img src="{SRC_PROD_THUMB}" alt="{TXT_TITLE}" />

					<span class="price">{TXT_PRICE}</span>

					<span class="name">{TXT_TITLE}</span>

				</a>

			</div>

		<!-- END: products -->

I would like either add another class to the product-container, or put the following code after every 3rd product:

<div class="clear"> </div>

How can I do this? I am expecting to have to make a change to the viewCat.inc.php file, but I'm not sure what needs to be done.

[Robsta]

I don't really understand what you mean, can you clarify please.

Do you mean every third product you need a gap, or do you mean you need to use the style reset... ie clear="all" ?

What are you trying to achieve?

[Guest Brandon!]

The second one. After every 3rd product I need to be able to insert an HTML/CSS clear so that it forces the next row of products down.

Currently I just have each product container floating, but if a specific container is taller than another (longer product name), the row breaks. If I can throw a clearer in there, all will be well.

[Guest Brivtech]

The way that it's usually done is by making the containing DIV a specific width, so once you get past 3 boxes wide, it has to move down (Without having to add the clear).

The problem with your approach is that you need a mechanism to count, so you would have to start making modifications to the inc.php file to accomodate this, and it starts getting tricky - Also the containing DIV gets cleared in the process as well, so that needs to be reset each time.

If you're doing this for a specific reason like adding in some box graphics between rows, dividing line, etc., you're best doing this with a background that the containing DIV uses.

[Guest Brandon!]

The way that it's usually done is by making the containing DIV a specific width, so once you get past 3 boxes wide, it has to move down (Without having to add the clear).

The problem with your approach is that you need a mechanism to count, so you would have to start making modifications to the inc.php file to accomodate this, and it starts getting tricky - Also the containing DIV gets cleared in the process as well, so that needs to be reset each time.

If you're doing this for a specific reason like adding in some box graphics between rows, dividing line, etc., you're best doing this with a background that the containing DIV uses.

I already have the containing divs with a specific width, but its the heights that are causing problems. If I have 3 boxes that are all 30%, they break fine. THe 4th box starts a new line. However, if box 2 is taller than box 3, box 4 ends up under box 3 because it "runs in to" the taller box 2. If I could force a clear after 3, then box 4 is smart enough to figure out where to go.

I guess no one has ever tried to make a table with this template language??

[Robsta]

The way that it's usually done is by making the containing DIV a specific width, so once you get past 3 boxes wide, it has to move down (Without having to add the clear).

The problem with your approach is that you need a mechanism to count, so you would have to start making modifications to the inc.php file to accomodate this, and it starts getting tricky - Also the containing DIV gets cleared in the process as well, so that needs to be reset each time.

If you're doing this for a specific reason like adding in some box graphics between rows, dividing line, etc., you're best doing this with a background that the containing DIV uses.

I already have the containing divs with a specific width, but its the heights that are causing problems. If I have 3 boxes that are all 30%, they break fine. THe 4th box starts a new line. However, if box 2 is taller than box 3, box 4 ends up under box 3 because it "runs in to" the taller box 2. If I could force a clear after 3, then box 4 is smart enough to figure out where to go.

I guess no one has ever tried to make a table with this template language??

Just apply a height setting. Tables are easier to control under certain circumstances, I use them a lot still as they have benefits over solely using DIVs.

[Guest Brandon!]

That's pretty much the fix I'm forced to use right now. Unfortunately, some of the containers (depending on the category) are very short, where others are much taller, so there are some pages where there's some unnecessary gaps.

How can you you work with tables? Where you would break and create a new </tr><tr>, I just want a <div class="clear"> </div>.

[Robsta]

No I use divs for that general repeating elements. I have used tables for the internals of each product before to control the spacings.

[Guest Brandon!]

I went and just made a quick hack I guess. Not ideal, but I needed it.

In viewCat.ini.php:

find

			$view_cat->parse("view_cat.productTable.products");

Add above

			////////////////////////////////

			// TAG NTH CLEARER			//

			////////////////////////////////

			$view_cat->assign("NTH_CLEAR", ((($i+1)%3===0) ? '<div class="clear"> </div>' : ''));

You can change the %3 to whatever you need to clear at.  3 means every third product has a clearer after it.



Then in your template you can use 

{NTH_CLEAR}

After your container <div> and you're done.