title: I would like to format my list data from a MySQL database into even rows and columns
body: <p>Essentially as the title says. I have looked at other examples but they don't seem to fit my requirements. I am echoing out data from a database to the user in list format. I would like it to appear as even rows and columns when displayed. </p>
  
  <p>here is my current css code</p>
  
  <pre><code>.recent_items{
      margin-left: 10%;
      margin-right: 10%;
  }
  
  .item li{
      list-style: none;
      display: inline-block;
      padding: 10px;
  }
  .item{
     width:85%;
  }
  </code></pre>
  
  <p>and here is the php code for the data</p>
  
  <pre><code>&lt;?
                      $per_page = 30;
                      $pages_query = mysql_query("SELECT COUNT(*) FROM ads") or die(mysql_error());
                      $pages = ceil(mysql_result($pages_query, 0)/ $per_page);
                      $curr_page = (isset($_GET['page'])) ? (int)$_GET['page'] : 1;
                      $start = ($curr_page - 1) * $per_page;
  
                      //get ad information
                      $ad_info = mysql_query("SELECT * FROM ads ORDER BY dateCreated DESC LIMIT $start, $per_page") or die(mysql_error());
                      $rows = mysql_num_rows($ad_info);
  
                      echo '&lt;ul class="item"&gt;';
                      while($row = mysql_fetch_array($ad_info)){
                          $ad_id = $row['adId'];
                          $title = $row['title'];
                          $price = $row['price'];
                          $location = $row['location'];
  
                          $ad_type = mysql_query("SELECT * FROM types WHERE adId=$ad_id") or die(mysql_error());
                          while($row = mysql_fetch_array($ad_type)){
                              $cat = $row['category'];
                              $sub = $row['subCat'];
  
                              echo
                              "
                                  &lt;li&gt;$title&lt;/br&gt;
                                  &lt;label&gt;Price:&lt;/label&gt; $price&lt;/br&gt;
                                  &lt;label&gt;Location:&lt;/label&gt; $location&lt;/br&gt;
                                  &lt;a href=\"search.php?searchValue=".$cat."\"&gt;$cat&lt;/a&gt;/&lt;a href=\"search.php?searchValue=".$sub."\"&gt;$sub&lt;/a&gt;&lt;/li&gt;
                              ";
                          }
                      }
                      echo '&lt;/ul&gt;';
  
                      if($pages &gt;= 1 &amp;&amp; $curr_page &lt;= $pages){
                          for($x = 1; $x &lt;= $pages; $x++){
                             echo ($x == $curr_page) ? "&lt;b&gt;&lt;a href=\"?page=$x\"&gt;$x&lt;/a&gt;&lt;/b&gt; " : "&lt;a href=\"?page=$x\"&gt;$x&lt;/a&gt; ";
                          }
                      }
                  ?&gt;
  </code></pre>
  
  <p>The problem is that css and php code come out looking this:
  <a href="https://twitter.com/HassanNSaid/status/320364537477996544/photo/1" rel="nofollow">https://twitter.com/HassanNSaid/status/320364537477996544/photo/1</a></p>
  
  <p>As you can see the columns are not alined. I tried altering the width but all that happened is a item basically moved up one row.</p>
  
  <p>Thanks in advance</p>