Q:

How to arrange image divs in rows of 3?

Hi all i got many divs that has class names such as ItemLeft,ItemMiddle and ItemRight. 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) ?
i get the image divs from getjson call as follows:
$.getJSON('http://www.awebsite.com/get?url=http://www.bwebsite.com/moreclips.php&callback=?', function(data){
    //$('#output').html(data.contents);

 var siteContents = data.contents;  

document.getElementById("myDiv").innerHTML=siteContents

Note: each time i call the getjson i get 6 image divs back that shows all below each other instead of 3 in a row!
and this the div images retrieved by making getjson call, but all these image divs below each other not 3 in rows:
<div class="ItemLeft">

  <div class="Clipping">        
    <a class="ImageLink" href="/videos/id1234" title="galaxy">
      <img class="ItemImage" src="/Images/galaxyimg.jpg" alt="galaxy" />
      <img class="OverlayIcon" src="/Images/1.png" alt="" />
    </a>
    <a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/id1234"><span class="Text">51:57</span></a>
  </div>

  <div class="Title"><a href="/videos/id1234" title="galaxy">galaxy</a></div>

  <div class="VideoAge">1 daybefore</div>

  <div class="PlaysInfo"> broadcast 265</div>

</div>

A:

Based on your question i have duplicated your leftItem to create multiple items and added a fiddle here
http://jsfiddle.net/tVMet/
Provide float for your divs and end of the third just give a div clearing the float.
<div class="clear" />

.ItemLeft, .ItemMiddle, .ItemRight
{
    float:left;
}
.clear
{
    clear:both;
}

