My problem is that the css is breaking a list item off to become part off the next column
That looks ugly.

How can I fix [this problem](http://www.woonbel.nl/)

this is the css and the loop

```
.cbt{clear:both;}

container-main{ width:960px;}

ul {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
}

li{border:solid 1px #555;}

.item-vol{ height:250px;}

<div id="container-main" style="background-color:#F6F6F6;">

  <?php
echo '<div><br>winkelwagen_id is: <span style="color:red;"><b>'.$winkelwagen_id.'</b></span></div><br>';
//select all the items into the database and show them to screen

$q = "SELECT item_id, naam, prijs, img FROM shbel_items";
$q2 = "SELECT item_id,aantal FROM shbel_winkelwagen_items where winkelwagen_id = $winkelwagen_id";
//extracting every single item
$records = $crud->rawSelect($q);
        $items = $records->fetchAll(PDO::FETCH_ASSOC);

echo"<UL>";
for($i=0, $cnt = 5; $i<$cnt; $i++){

foreach($items as $item)

    {

        if( $winkelwagen->productBestaat($item['item_id'] )){
            //voeg verwijder/toevoegen knop toe aan html afhankelijk van een match

        }

    ?>
     <LI>    
    <div class="item-vol"><form action="/" method="post" id="">
    <div><img height="100" width="100" src="<?php echo("/images/".$item['img']); ?>" /></div>
    <div>Item naam: <?php echo($item["naam"]); ?></div>
    <div>Omschrijving <?php echo($item["omschrijving"]); ?></div>
    <div><input type="checkbox" name="toevoegen[]" value="<?php echo($item['item_id']); ?>"/>
    <span><input name="aantal" type="text" size="10" value=""></span></div>
    <div><input id="" type="submit" value="toevoegen" name="action"/></div> 
            <input name="item_id" type="hidden" value="hidden">
    </form>
    </div>
    </LI>
    <?php

    }
}// EINDE FOR LOOP
?>

  </ul>
  </div><!--    EINDE CONTAINER-MAIN-->

```

thanks, Richard