developer.google.com/showcase javascript how-to explanation :s
I'm trying to find a possible tutorial of some sort that could help me produce something like the following: 

https://developers.google.com/showcase/

As you can see from the website, it is the google developers showcase. The feature i'm trying to replicate but failing is the one shown in the image => http://i.stack.imgur.com/ILrjL.png


i would assume that the elements are in a list and they are floated so that the thumbnails are displayed four in a row, but the thing i can't rack my head around is how they are placing the  generated HTML/CSS into the webpage in the correct row.

would the code be something like this:

       <li>thumb1</li>
       <li>thumb2</li>
       <li>thumb3</li>
       <li>thumb4</li>
           <div id="projectDisplay">
              <p>content goes here</p>
           </div>
       <li>thumb5</li>
       <li>thumb6</li>
       <li>thumb7</li>
       <li>thumb8</li>
           <div id="projectDisplay">
              <p>content goes here</p>
           </div>
       <li>thumb9</li>
       <li>thumb10</li>
       <li>thumb11</li>
       <li>thumb12</li>
           <div id="projectDisplay">
              <p>content goes here</p>
           </div>

but still i can't seem to figure it out :( any ideas or help would really be appreciated!! 
developer.google.com/showcase javascript how-to explanation :s
===

I'm trying to find a possible tutorial of some sort that could help me produce something like the following: 

https://developers.google.com/showcase/

As you can see from the website, it is the google developers showcase. The feature i'm trying to replicate but failing is the one shown in the image => http://i.stack.imgur.com/ILrjL.png


i would assume that the elements are in a list and they are floated so that the thumbnails are displayed four in a row, but the thing i can't rack my head around is how they are placing the  generated HTML/CSS into the webpage in the correct row.

would the code be something like this:

       <li>thumb1</li>
       <li>thumb2</li>
       <li>thumb3</li>
       <li>thumb4</li>
           <div id="projectDisplay">
              <p>content goes here</p>
           </div>
       <li>thumb5</li>
       <li>thumb6</li>
       <li>thumb7</li>
       <li>thumb8</li>
           <div id="projectDisplay">
              <p>content goes here</p>
           </div>
       <li>thumb9</li>
       <li>thumb10</li>
       <li>thumb11</li>
       <li>thumb12</li>
           <div id="projectDisplay">
              <p>content goes here</p>
           </div>

but still i can't seem to figure it out :( any ideas or help would really be appreciated!! 