Thread

This question may be related to a resolved thread.

Hi there,

I thought we’d found a good solution to what should be a simple one (see previous thread).

I’ve just been implementing the solution we found in the previous thread to create a layout that worked across all browsers:

EXPRESSION OPENING TAG
{switch='<div class="row">||'}
  CONTENT TO GO HERE…
{switch='||</div>'}
{if count == total_results}
  </div><!-- extra switch div -->
{/if}
EXPRESSION CLOSING TAG

Unfortunately, it appears that if this is is used to display entries and the total number of entries is a multiple of three (I’m using a three column layout in this case) an extra, unwanted </div> is added.

This then means that the items following it are displayed incorrectly as the browser thinks the containing div has just been closed.

You can see an example at the bottom of the page here… http://247896-7.temp-dns.com/services

Surely I can’t be the only person facing this challenge?

Any ideas of a solution will be greatly appreciated!

Hi Tom,

Well… nice to see you back at this 😊

Where is the opening div that is being closed with total_results?

Can I see what you ideal HTML would look like? Or the full template code. If it wont all fit here, you can use http://pastie.org/

Looking at the page, I can see what you are trying to do, but I want to run some tests to get you a solution.

Cheers,

Hi Dan,

Thanks for your response.

There is no opening div that is closed with the total_results, as that was the solution we came to in the previous thread. I guess that’s also one of the problems.

What I’m looking to do is simply get every three entries placed within a row, to fix a layout issue in IE. So if there was three entries it should ideally look like this:

<div><!-- start of row -->

  <div><!-- start of entry -->
    ENTRY CONTENTS
  </div><!-- end of entry -->

  <div><!-- start of entry -->
    ENTRY CONTENTS
  </div><!-- end of entry -->

  <div><!-- start of entry -->
    ENTRY CONTENTS
  </div><!-- end of entry -->

</div><!-- end of row -->

And if there was four entries, it should ideally look like this:

<div><!-- start of first row -->

  <div><!-- start of entry -->
    ENTRY CONTENTS
  </div><!-- end of entry -->

  <div><!-- start of entry -->
    ENTRY CONTENTS
  </div><!-- end of entry -->

  <div><!-- start of entry -->
    ENTRY CONTENTS
  </div><!-- end of entry -->

</div><!-- end of first row -->

<div><!-- start of second row -->

  <div><!-- start of entry -->
    ENTRY CONTENTS
  </div><!-- end of entry -->

</div><!-- end of second row -->

I’ve put the template code here… http://pastie.org/5364859

I look forward to hearing your thoughts!

Hi Tom,

I don’t think you can do this easily with just EE tags. You will need to use PHP. Here is something that might work for you:

<?php 
$intCnt = 0;
{exp:channel:entries channel="YourChannelName"}
 
 if ($intCnt == 0 || $intCnt % 3 == 0){
  if($intCnt == 0){
   echo '<div class="row">'."\n";
  }
  else{
   echo '</div>'."\n";
   echo '<div class="row">'."\n";
   $intCnt = 0;
  }
 }
  
 echo "<div><h2>{title}</h2><p></div>\n";</p>

<p> $intCnt++;</p>

<p>{/exp:channel:entries}</p>

<p>if ($intCnt <= 3){<br />
 echo '</div>'."\n";<br />
}<br />
?>

I hope that helps.

Mike

Thanks for your input Mike. Could you give me a little help with how to use the code you’ve suggested please?

Dan, any other ideas spring to mind?

Hi Tom,

Here is what you need to do:

1) Make sure php output is enabled on your template where you will run this code
2) Copy and paste my code in your template
3) Replace the channel entries tag with yours
4) Replace the HTML bits with yours
5) Save the template and run it to test

That should be all you need to do. If you want to change the number of columns just replace all instances of the number “3” in the code to what ever number you like and it will take care of it for you. I hope that helps.

Thank you,

Mike

Hey Tom,

Take this part out of your template:

{if count == total_results}
    </div><!-- extra switch -->
{/if}

Cheers,

Hi Dan,

That won’t work. The switch will only close the div if it hits the 3rd iteration. If you only have 2 entries then the switch will not work. It has to be done via PHP so you have control over that.

Mike

Well, indeed… you are right Mike.

Cheers,

Dan: Thanks for your thoughts.

Mike: It seems that the code you suggested isn’t quite working correctly. You can see the code (along with the original code) here… http://dev.customstudio.co/sandbox

I’ve also pasted the template code here… http://pastie.org/5412035

Any thoughts are appreciated!

Tom - is the outer DIV used for styling or just to divide rows?

Tom - is the outer DIV used for styling or just to divide rows?

Hi Rob,

The ‘row’ div is used to contain the three entries within a row and stop entries from the row below from moving out of line in IE.

Does that answer your question?

If it’s just for containing content then you could do away with it and style your 3 blocks accordingly, eg:

Basic code for your loop:

<div class="box {switch='a|b|c}"><h1>{title}</h1></div>

Then CSS

.box { width: 33.3%; } /* set box width */
.a { float: left; clear: left; } /* first in row */
.b { float: left; } /* second in row */
.c { float: right; } /* last in row */

The trick here is clear: left, this should start the 4th box on a new “row” and so on.

Hi Tom,

That’s strange as i tested this on my EE 2.5.2 and it works. Do you have PHP enabled for your template?

Thank you,

Mike

Hi Tom,

That’s strange as i tested this on my EE 2.5.2 and it works. Do you have PHP enabled for your template?

Thank you,

Mike

Hi Mike,

PHP is turned on, but I’m running 2.5.3.

Would that make any difference?