Flickr Photostream

I'm getting flickr code to display a photostream in my html page:

<!-- Start of Flickr Badge -->
<style type="text/css">
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {background-color:#ffffff;border: solid 1px #000000}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
</style>
<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
<tr>
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=10&display=latest&size=s&layout=h&source=user&user=83420490%40N07"></script>
</tr>
</table>
</td></tr></table>
<!-- End of Flickr Badge -->

But it only diplays images in one row. I want two display 4 images per row can any one help me?

Solution

<html> 
<head> 
<title>Flick Test</title>
<script src="http://code.jquery.com/jquery-latest.js"></script> 

<script>


$(function(){       

    var id='83420490%40N07';
    var limit ='20';

    // Flickr Photostream feed link.
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=" + id + "&lang=en-us&format=json&jsoncallback=?", 

    function(data){$.each(data.items, 

    function(i,item){

        // Number of thumbnails to show.            
        if(i < limit){

        // Create images and append to div id flickr and wrap link around the image.
        $("<img/>").attr("src", item.media.m.replace('_m', '_s')).appendTo("#flickr").wrap("<a href='" + item.media.m.replace('_m', '_z') + "' name='"+ item.link + "' title='" +  item.title +"'></a>");


        }

    }); 

    }); 

    });

</script>
<style type="text/css">
#flickr{
    width:340px;
    overflow:hidden;
    }
#flickr a{
    width:75px;
    float:left;
    margin:10px 10px 0 0;
    padding:0;
    border:0;   
    }
</style>


</head> 
<body> 
<div id="flickr"></div>
</body> 
</html>

That should do the trick. You need to upload more images to your stream. To test change the id to mine 49269824@N04