title: How to arrange image divs in rows of 3?
body: <p>Hi all i got many divs that has class names such as <strong>ItemLeft,ItemMiddle and ItemRight</strong>. I wonder how i can display these image divs 3 in a row using css or any easy method(currently all the images display one below each other) ?</p>
  
  <p>i get the image divs from getjson call as follows:</p>
  
  <pre><code>$.getJSON('http://www.awebsite.com/get?url=http://www.bwebsite.com/moreclips.php&amp;callback=?', function(data){
      //$('#output').html(data.contents);
  
   var siteContents = data.contents;  
  
  document.getElementById("myDiv").innerHTML=siteContents
  </code></pre>
  
  <p><strong>Note:</strong> each time i call the getjson i get 6 image divs back that shows all below each other instead of 3 in a row!</p>
  
  <p>and this the div images retrieved by making getjson call, but all these image divs below each other not 3 in rows:</p>
  
  <pre><code>&lt;div class="ItemLeft"&gt;
  
  
    &lt;div class="Clipping"&gt;        
      &lt;a class="ImageLink" href="/videos/id1234" title="galaxy"&gt;
        &lt;img class="ItemImage" src="/Images/galaxyimg.jpg" alt="galaxy" /&gt;
        &lt;img class="OverlayIcon" src="/Images/1.png" alt="" /&gt;
      &lt;/a&gt;
      &lt;a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/id1234"&gt;&lt;span class="Text"&gt;51:57&lt;/span&gt;&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="Title"&gt;&lt;a href="/videos/id1234" title="galaxy"&gt;galaxy&lt;/a&gt;&lt;/div&gt;
  
    &lt;div class="VideoAge"&gt;1 daybefore&lt;/div&gt;
  
    &lt;div class="PlaysInfo"&gt; broadcast 265&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>