php - CSS div to extend content onto more lines -

i have php script returns list of small images (like thumbprints) displayed based on search criteria.

i'd these images displayed on after until reach approx 45% across screen , if there more images fit in space, images continue on new line.

i have used css set following within div.

  .example {   float: left;   width: 45%;   }

but images continue beyond 45%. if used style overlap:scroll; or overlap:hidden, images stop @ 45% , either can scroll see others or hidden.

how can make images continue onto new 'line'.

i've tried word-wrap without success.

thanks help.

the way describe it should work fine.

i made jsfiddle demo

images default displayed inline elements, if elements not images try using display:inline on them or display:inline-block.

IO