Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You have error in else thread because you have two closing divs in it. Also you can't have repeated <code>id</code></p> <p>I can't understand do you want 3 columns or 3 rows? If you want 3 columns that your code will not work on <code>totalBoxes</code> mote than 9 (it will produce more columns).</p> <p>I suggest you to use following logic:</p> <pre><code>&lt;style&gt; .column {float: left; padding: 10px; width: 100px; border: solid thin red; background-color: green; margin-right: 5px} .box {width: 100%; height: 100px; background-color: white; margin-bottom: 5px; } &lt;/style&gt; &lt;?php $boxes_in_column = ceil($totalBoxes / 3); echo('&lt;div class="column"&gt;Column 1'); for ($i = 1; $i &lt;= $totalBoxes; $i++) { echo('&lt;div class="box"&gt;'.$i.'&lt;/div&gt;'); if (($i % $boxes_in_column) === 0){ echo('&lt;/div&gt;&lt;div class="column"&gt;Column '.(ceil($i / $boxes_in_column)+1)); } } echo('&lt;/div&gt;'); ?&gt; </code></pre> <p>It will produce extra empty column if you have total boxes divided by 3 without remainder. So try to fix it yourself.</p> <p><img src="https://i.stack.imgur.com/jBAL4.png" alt="three columns"></p> <p>Horizontal fill</p> <pre><code>&lt;style&gt; .box1 {display: inline-block; width: 100px; height: 100px; background-color: white; margin: 5px; } .parent {background-color: blue; border: solid thin red; width: 330px} &lt;/style&gt; &lt;?php $totalBoxes = 13; echo '&lt;div class="parent"&gt;'; for ($i = 1; $i &lt;= $totalBoxes; $i++) { echo('&lt;div class="box1"&gt;'.$i.'&lt;/div&gt;'); } echo '&lt;/div&gt;'; ?&gt; </code></pre> <p><img src="https://i.stack.imgur.com/UTvwz.png" alt="horizontal fill"></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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