Question

I have a bit of code I wrote, that echo’s 3 variable (quiz name, level and subject) inside a DIV, if there are 4 quizzes it will print 4 different DIVs.

However each div is printed on a different line, which doesn’t make good use of space, as you could fit 3 on a line.

How would I go about getting it to print them in rows of 3?

I was thinking maybe a table? or javascript of somekind?

Here is my dose for the div, sorry it’s not that clear. Also the CSS is on a different page, but is pretty basic, just defined it as a block.

for($i=0; $i<$num; $i++){?>
    <div class="quizBlock"><table>
    <tr align="left"><th colspan="2"><p class="subFontMe"><?php echo $quiz[$i]['Name']?></p></th></tr>
    <tr align="left"><th><p class="subFontSm"><?php echo $quiz[$i]['Level']?></p></th>
    <th><p class="subFontSm"><?php echo $sub[$quiz[$i]['Subject_ID']-1]['Subject']?></p></th></tr></p></table></div><br><?php }?>

Answer 1

if you want the divs to be aligned in a single line. then give float left property to it. and the width should be defined inside the class so that the parent div can accomodate three divs inside.

<?PHP

for($i=0; $i<$num; $i++){?>

<div class="quizBlock" style="float:left">
<table>
<tr align="left"><th colspan="2"><p class="subFontMe"><?php echo $quiz[$i]['Name']?></p></th></tr>
<tr align="left"><th><p class="subFontSm"><?php echo $quiz[$i]['Level']?></p></th>
<th><p class="subFontSm"><?php echo $sub[$quiz[$i]['Subject_ID']-1]['Subject']?></p></th></tr></p>    </table></div>

<?php } ?>

or you may want to try like:

<div class="quizBlock">
<table>
<?PHP

for($i=0; $i<$num; $i++){ ?>


<tr align="left">
<th colspan="2"><p class="subFontMe"><?php echo $quiz[$i]['Name']?></p></th>
<th><p class="subFontSm"><?php echo $quiz[$i]['Level']?></p></th>
<th><p class="subFontSm"><?php echo $sub[$quiz[$i]['Subject_ID']-1]['Subject']?></p></th>
</tr>

<?php } ?>

</table>
</div>

which also put the data in separate rows.