StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Try this one.</p> <pre><code><div id="content"> <div class="content-column"> <?php $cols = 3; // Change to columns needed. $catcount = count($categories); $catpercol = ceil($catcount / $cols); $c = 0; foreach ($categories as $category) { if ( $c == $catpercol ) { $c = 0; print "</div><div class='content-column'>"; } ?> <div class="manufacturer-list"> <div class="manufacturer-heading"><?php echo $category['name']; ?><a id="<?php echo $category['name']; ?>"></a></div> <div class="manufacturer-content"> <?php if ($category['manufacturer']) { ?> <?php for ($i = 0; $i < count($category['manufacturer']);) { ?> <ul> <?php $j = $i + ceil(count($category['manufacturer']) / 4); ?> <?php for (; $i < $j; $i++) { ?> <?php if (isset($category['manufacturer'][$i])) { ?> <li><a href="<?php echo $category['manufacturer'][$i]['href']; ?>"><?php echo $category['manufacturer'][$i]['name']; ?></a></li> <?php } ?> <?php } ?> </ul> <?php } ?> <?php } ?> </div> </div> <?php $c++; } ?> </div> </div> </code></pre> <p>Add <code>.content-column { float: left; width: 33.33333%; }</code> to your CSS.</p> <p>Details: <code>$cols = 3;</code> enables you to set the desired number of columns (note: you might need to change CSS accordingly).</p> <p><code>$catcount = count($categories);</code> gives you the total number of categories about to be rendered.</p> <p><code>$catpercol = ceil($catcount / $cols);</code> divides that total number evenly into the required number of columns with the last column having eventually less items than the others.</p> <p><code>$c = 0;</code> is your counter. It increases at the end of the outer foreach loop.</p> <p>Within the loop, <code>$c</code>is checked if it matches the <code>$catpercol</code> number and if so, the current parent div is closed and a new one created. You end up with as many parent divs as you need columns. Just add appropiate CSS to make them appear besides each other.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload