foreach loop image display horizontal - php

Question

I just had a previous question about this script, and now I'm back again because it's displaying vertically.
Basically, what I want this to do is display three photos per line, so there will be two rows of 3 images, totaling at 6 images.
<div class="4u">
<article class="item" style="float: left;">
<?PHP foreach($photoData->data as $img){
echo '<img src="'.$img->images->thumbnail->url.'"/>';
echo '<header>'.$img->caption->text.'</header>';}
?>
</article>
</div>
The program I'm building is an Instagram fetcher that fetches 6 of my most recent photos from Instagram, and works, but here's the output: http://i.stack.imgur.com/xgTBW.png
Now, clearly I zoomed out because I wanted to show you all of the images.
I've tried float: left, and it didn't work.
Anyone have any ideas? I'd love the help. Thank you. :)
Here's a JSFiddle of how I'd like it to go
http://jsfiddle.net/GZb8A/

Answer 1

Using a line-break <br> to move to new line, do this:
<article class="item"> // no styles
<?php
$column_count = 0;
foreach($photoData->data as $img) {
$column_count++;
// adjust width and height in styles to suit your content better
<div class="instagram_item" style="width:200px; height:225px; text-align:center; display:inline-block; margin:0 10px 10px 0;">
echo '<a href="'.$img->link.'?intent=like" target="_blank">';
echo '<img src="'.$img->images->thumbnail->url.'"/>';
echo '</a>';
echo '<header>'.$img->caption->text.'</header>';
</div>
if ($column_count == 3) {
$column_count = 0;
echo '<br>';
}
}
?>
</article>

Answer 2

<?PHP
$counter = 0;
foreach($photoData->data as $img){
$counter++;
echo '<img src="'.$img->images->thumbnail->url.'"/>';
echo '<header>'.$img->caption->text.'</header>';
if ($counter == 3){
echo "<br/>";
$counter = 0;}
}?>
This should work

Answer 3

You could close and open your tag in foreach statement like:
<article class="item" style="float: left;">
<?php
$count = 0;
foreach($photoData->data as $img) {
$count++;
echo '<img src="'.$img->images->thumbnail->url.'"/>';
echo '<header>'.$img->caption->text.'</header>';
if(count>3) {
// close and open article
?>
</article>
<article class="item" style="float: left;">
<?php
$count = 0; //Reset count to 0 edited by LJ_C
}
}
?>
</article>