title: Styling multiple while loop results, getting them next to each other?
body: <p>I have a search form the searches through a packaging database. Everything works fine and dandy, when the search from is submitted I get returned results on a different page displayed in styled boxes with a picture. But unfortunately the seem to display one after another underneath each other. Although it is good that they are returning and I am getting the correct results. I want to be able to display three next to each other, then they go to the next row and display three more, so on and so forth until I have run out of results. </p>
  
  <p>Here is the PHP: </p>
  
  <pre><code>&lt;?php
              $con = mysql_connect ("localhost", "horizon1", "D2j616H5O@Lw");
                     mysql_select_db ("horizon1_delyn", $con);
  
              if (!$con)
                  { 
                      die ("Could not connect: " . mysql_error());
                  }
  
              $descrip = mysql_real_escape_string($_POST['descrip']); 
              $depth   = mysql_real_escape_string($_POST['depth']);
              $varWidth = mysql_real_escape_string($_POST['traywidth']);
              $varHeight= mysql_real_escape_string($_POST['trayheight']);
              $varRange = mysql_real_escape_string($_POST['trayrange']);
              $varType  = mysql_real_escape_string($_POST['traytype']);
              $varShape = mysql_real_escape_string($_POST['trayshape']);
              $varImage = mysql_real_escape_string($_POST['imagename']);
  
              if (isset($varHeight) &amp;&amp; !empty($varHeight)) {
                      $low  = ($varHeight."00");
                      $high = ($varHeight."99");
                  } else {
                      $low  = ("000");
                      $high = ("999");
                  }
  
              if (isset($varWidth) &amp;&amp; !empty($varWidth)) {
                      $min  = ($varWidth."00");
                      $max = ($varWidth."99");
                  } else {
                      $min  = ("000");
                      $max = ("999");
                  }   
  
  
              $sql = "SELECT * FROM range WHERE 
                          description LIKE '%".$descrip."%'  
                      AND trayrange   LIKE '%".$varRange."%' 
                      AND traytype    LIKE '%".$varType."%' 
                      AND trayshape   LIKE '%".$varShape."%'
                      AND traywidth   BETWEEN '".$min."'  AND '".$max."' 
                      AND trayheight  BETWEEN '".$low."' AND '".$high."' ";
  
  
                  $r_query = mysql_query($sql);  
  
                  while ($row = mysql_fetch_array($r_query)) 
                      { 
                          echo '&lt;div id="results"&gt;';
                          echo '&lt;p class="image"&gt;
                                  &lt;img src="   '. $row['imagename'] . '" width="150" length="80"&gt; 
                                      &lt;/p&gt;';
                          echo '&lt;div id="table"&gt;&lt;br /&gt;
                                  &lt;strong&gt; Tool Code: &lt;/strong&gt;  '. $row['toolcode'];
                          echo '&lt;br /&gt;&lt;strong&gt; Description: &lt;/strong&gt; '. $row['description']; 
                          echo '&lt;br /&gt;&lt;strong&gt; Tray range: &lt;/strong&gt; '. $row['trayrange']; 
                          echo '&lt;br /&gt;&lt;strong&gt; Tray type:  &lt;/strong&gt; '. $row['traytype'];
                          echo '&lt;br /&gt;&lt;strong&gt; Tray size:  &lt;/strong&gt; '. $row['traysize']; 
                          echo '&lt;br /&gt;&lt;strong&gt; Tray shape: &lt;/strong&gt; '. $row['trayshape'] . '&lt;/div&gt;' . '&lt;br /&gt;';
                          echo '&lt;a href="enquire.html"&gt;Enquiry Page&lt;/a&gt; &lt;br /&gt;' . 
                               '&lt;a href="packingtest.html"&gt;Back to Search&lt;/a&gt;';
                          echo '&lt;/div&gt;' . '&lt;br /&gt;';
                      }
                  if (mysql_num_rows($r_query) &lt;= 0){
                      echo 'No results match your search, please try again';
                 }
          ?&gt;
  </code></pre>
  
  <p>And here is the CSS: </p>
  
  <pre><code>   &lt;style&gt;
   #boxes {
  padding: 10px;
  margin-top: 20px;
  margin: 10px;
  float: left;
  display: block;
  }
   #results {
  width: 212px;
      padding: 5px;
      background: #E8CF24;
  display: block;
      overflow:auto;
  
  font-family: Verdana, Geneva, sans-serif;
  font-size: 11px;
  font-color: #FFF;
  
  border: 2px solid #cccccc;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  
  -moz-box-shadow: 2px 2px 2px #cccccc;
  -webkit-box-shadow: 2px 2px 2px #cccccc;
  box-shadow: 2px 2px 2px #cccccc;
  }
   #table {
  margin-top: 10px;
  width: 200px;
      padding: 3px;
      background: #FFF;
  display: block;
      overflow:auto;
  
  border: 2px solid #cccccc;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  
  -moz-box-shadow: 2px 2px 2px #cccccc;
  -webkit-box-shadow: 2px 2px 2px #cccccc;
  box-shadow: 2px 2px 2px #cccccc;
  }
   .image {
  margin-left: 28px;
  margin-bottom: 0px;
  margin-top: 5px;
  }
   a:link {
  color: #000423;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  }
   &lt;/style&gt;
  </code></pre>
  
  <p>I have tried to edit it with the CSS but I can change the position and padding, margins and so on forth. But I can't get them to align next to each other. </p>
  
  <p>Anyone able to help? Thanks in advance :)</p>