PHP split for each statement and float half of the data right

Question

I have the code below to split my for each statement into two separate divs:

<?php
    $previousLetter = false;
?>
<?php 
$i=1; // have a counter variable
foreach($this->clubs as $clubs) : ?>
    <?php
    $firstLetter = substr($clubs->club_name, 0, 1);
    if ($firstLetter != $previousLetter) {
    if($i==1){
        echo "<div class="left_class">"; // open left div
    }
    ?>
        <h3 id="club-link-header"><u><?php echo $firstLetter; ?></u></h3>
    <?php } ?>
        <a id="club-link" href="<?php echo $this->url(array('controller' => 'club-description', 'action' => 'index', 'club_id' => $clubs->id));?>"><br />
        <?php echo $this->escape($clubs->club_name);?></a>
    <?php $previousLetter = $firstLetter; ?>
<?php 
    if($i==25){
        echo "</div>"; //close left div
        echo "<div class="right_class">"; // open right div
    }

    if($i==50){
        echo "</div>"; //close right div
    }

$i++; // increment the counter variable for each loop
endforeach; 
?>

The HTML:

<body>
        <div id="top">
            <a id="admin-link" href="/MN/public/index.php/admin/index/id/1"></a>
    <div id="logged-in-as">
        Hello! ric89. <a href="/MN/public/index.php/auth/logout">Logout</a>    </div>

</div>
    <div id="header">
    <div id="header-wrapper">
            <div id="social">
                <a id="fb" href="#"><img src="/MN/public/images/fb.png" /></a>
                <a id="twitter" href="#"><img src="/MN/public/images/twitter.png" /></a>
            </div>
            <div id="nav">
                <div id="nav-left">
                    <a href="/MN/public/index.php/index/index/id/1">Home</a>
                </div>
                <div id="nav-middle">
                    <a id="clubs-link" href="/MN/public/index.php/clubs/index/id/1">Clubs</a>
                    </div>
                <div id="nav-right">
                    <a id="admin-link" href="/MN/public/index.php/admin/index/id/1">Admin</a>
                </div>
            </div>
            <div id="logo">

             </div>

    </div>

</div>
    <div id="content">
        <h1>Clubs</h1>
           //database content is echo'd here, 50 items like this:
           <h3 id="club-link-header"><u>5</u></h3>
        <a id="club-link" href="/MN/public/index.php/club-description/index/id/1/club_id/1"><br />
    5th Avenue</a>
    </div>
<div id="footer">
        <p id="footer-text">created & designed by <a href="http://www.richardgregson.info" target="_blank">Richard Knight-Gregson</a></p>
</div>
</body>

The CSS:

/*Content styles */

.clubs-left {
    width: 450px;
}

.clubs-right {
    float: right;
    margin-left: 450px;
    position: absolute;
    width: 450px;
}

.right_class {
    float: right;
    width: 450px;
}

.left_class {
    position: absolute;
    width: 450px;
}

.clear {
    clear: both;
}

Here is an image of the problem -> http://imageshack.us/photo/my-images/84/screenshot20120426at211.png/ The footer should be 100% width.

The issue is I can't float the div right without breaking the layout as the right div needs to be on top of the left in the code but doing so will break the PHP.

Any suggestions?

Thanks

Answer 1

Since the problem that you are describing seams to be purely cosmetic, I believe that you need to clear the float to allow the document to continue its normal rendering:

After your <div class="right_class">...</div> :

HTML

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

CSS

.clear {clear: both;}

Answer 2

wouldn't something like this be more efficient?

Break up your list by alphabet to start...

var glossary=array();
var $half=(int)count($this=>clubs);

 var $count=0;

foreach ($this->clubs as $clubs){
        $glossary[substr($clubs->club_name, 0, 1)][] = $clubs;
    }
    # Start a definition list.  (http://www.w3schools.com/tags/tag_dl.asp)
    echo'<dl>';
    foreach ($glossary as $letter => $clubs){
        $count++;
        $class=($count>=$half)?'float_left':'float_right';
    # list all the clbs broken down by letter
        echo"<dt class='$class'>$letter</dt>";
        foreach ($clubs as $club)
        {

            echo"<dd class='$class'>
                <a id='club-link' href='" . $this->url(array('controller' => 'club-description', 'action' => 'index', 'club_id' => $club->id)) . "'>
            " . $this->escape($clubs->club_name) .
                "</a>
            </dd>";
        }
    }
    echo '</dl>';

and the css:

dl{
   width:100%;
}

.float_left{
   width:49%;
   float:left;
   clear:left;
}
.float_right{
   width:49%;
   float:right;
   clear:right;
}

this way after you hit the halfway point in clubs, the dt and dd elements stack on the right side, and the list will automatically balance, no matter how many clubs you have.

Answer 3

It turns out the footer was inside the content div and I hadn't closed the content div properly one more extra before the footer starts was all it needed! Sorry to waste your time..

PHP split for each statement and float half of the data right

Question

3 answers

solution1
1 2012-04-26 19:36:11

solution2
0 2012-04-26 20:39:18

solution3
0 2012-04-27 20:35:06

PHP split for each statement and float half of the data right

Question

3 answers

solution1 1 2012-04-26 19:36:11

solution2 0 2012-04-26 20:39:18

solution3 0 2012-04-27 20:35:06

solution1
1 2012-04-26 19:36:11

solution2
0 2012-04-26 20:39:18

solution3
0 2012-04-27 20:35:06