remove div margin at end of row (and clear floats)

3 posts by 2 authors in: Forums > CMS Builder
Last Post: June 20, 2012   (RSS)

By zaba - June 19, 2012

Basically i want to return the results into rows and columns but at the end of each row I need to remove the class that adds the margin to the right hand side and add in a clear floats div, for example.. (3 columns, 3 rows 9 returned results).
This is not a css thing, I just need to know how I would accomplish this from a list of returned records, so basically when parsed the source code would look like this...

<div id="container">
<div class="box margin10">some stuff</div>
<div class="box margin10">some stuff</div>
<div class="box">some stuff</div>
<div class="clearfloats"></div>

<div class="box margin10">some stuff</div>
<div class="box margin10">some stuff</div>
<div class="box">some stuff</div>
<div class="clearfloats"></div>

<div class="box margin10">some stuff</div>
<div class="box margin10">some stuff</div>
<div class="box">some stuff</div>
<div class="clearfloats"></div>

</div>

Re: [zaba] remove div margin at end of row (and clear floats)

By Jason - June 19, 2012

Hi,

You could try something like this.

Please note that this example has not been tested. You'll need to change variable names to match what is on your page.

<div id="container">

<?php
$recordsPerRow = 3;
$recordCount = 0;
?>

<?php foreach ($myRecords as $record): ?>

<?php if (++$recordCount % $recordsPerRow == 0): ?>
<div class="box">
<?php else: ?>
<div class="box margin10">
<?php endif ?>

// OUTPUT YOUR CONTENT HERE

</div>

<?php if ($recordCount % $recordsPerRow == 0): ?>
<div class="clearfloats"></div>
<?php endif ?>

<?php endforeach ?>


</div>

Hope this helps get you started
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/