title: My CSS code error on html (not match properly)
body: <p>i have some problem in my little webpage training project. I wrote this question page because my problem is little specific and i cant find solution that works on my webpage training project.</p>
  
  <p>My website screenshot 
  <a href="https://i.stack.imgur.com/dF0aF.png" rel="nofollow noreferrer">https://i.stack.imgur.com/dF0aF.png</a></p>
  
  <p>the HTML </p>
  
  <pre><code>&lt;?php
  if(!defined("INDEX")) die("--");
  $artikel=mysqli_query($koneksi, "SELECT * FROM `Tabel Artikel` order by id_artikel desc");
  while($data=mysqli_fetch_array($artikel)){
      $isi = substr($data['isi'],0,800);
      $isi = substr($data['isi'],0,strrpos($isi,""));
  ?&gt;
      &lt;div class="artikel"&gt;
          &lt;h2 class="judul"&gt;&lt;?=$data['judul'];?&gt;&lt;/h2&gt;
          &lt;p&gt;
              &lt;?php if ($data['gambar']!="") ?&gt;
              &lt;img src="../gambar/artikel/&lt;?=$data['gambar'];?&gt;" class="gambar-artikel" width="200"&gt;
                  &lt;?=$isi;?&gt; ...
              &lt;a href="?tampil=artikel_detail&amp;id=&lt;?=$data['id_artikel'];?&gt;"&gt;Selengkapnya&lt;/a&gt;
          &lt;/p&gt;
  &lt;/div&gt;
  &lt;?php }
  ?&gt;
  </code></pre>
  
  <p>The CSS part</p>
  
  <pre><code>.box{
      padding:10px;
      overflow:hidden;
  }
  .artikel{
      display:block;
      float:left;
      border-bottom:1px solid #ccc;
      margin-bottom:20px;
  }
  .gambar-artikel{
      float:left;
      padding:3px;
      margin-right:5px;
      border:1px solid #ccc;
  }
  </code></pre>
  
  <p>As you can see on my website picture, the content wont float properly on left and the '$isi' wont appear even there are a data on sql data base in that table. I hope there are some solution so each content would float left properly and the $isi would appear. I appreciate any suggestion. Cheers!</p>