Arrange images list using css

Question

Hi all, I have fetched the div element from another website, thanks to this group.

require_once('E:\wamp\www\in.com\components\simple_html_dom.php');


$html=file_get_html('http://www.behance.net/samerh/frame');
$ret=$html->find("div[id=frame-gallery]");
$ret=array_shift($ret);
echo($ret);

And the content in that div is all images and it is displaying in a single list, instead I want to arrange it into 3 columns and 10 rows by writing the css and js file for it.

It should be dynamic, like if any new image of a project is added or any changes made in that site it should be displayed in my current website.

Please help show me how do that arrangement in css,

Thanks in advance.

Answer 1

I agree with the comments made. Learn to accept answers that you find solve your problem (in case you don't know, accept answers by clicking on the check mark below the vote count). However, I'll have mercy on you.

This solution assumes that the images are all the same width, for illustration purposes, I'll say 100px wide. Your css could be:

#frame-gallery {width: 330px;}
#frame-gallery img {float: left; margin: 0 10px 10px 0;}

This should arrange them in 3 columns with 10px spacing between, and go for however many rows are needed for however many images are loaded. Change the width of the #frame-gallery to just fit the width of 3 images plus any margin, padding, borders, etc. that are being applied to them.