CODEWITHSUNDEEP
phpcssstylesdreamweaver
BEN HALL
BEN HALL

Reputation: 25

CSS div to extend content onto more lines

I have a php script that returns a list of small images (like thumbprints) that are displayed based on search criteria.

I'd like these images to be displayed on after another until they reach approx 45% across the screen and then if there are more images than will fit in the space, the images continue on to a new line.

I have used CSS to set the following within a div.

  .example {
  Float: left;
  Width: 45%;
  }

But the images continue beyond the 45%. If I used the style overlap:scroll; or overlap:hidden, the images stop at 45% and either you can scroll to see the others or they are hidden.

How can I make the images continue onto a new 'line'.

I've tried word-wrap without success.

Thanks for your help.

Upvotes: 2

Views: 163

Answers (2)

BobbyZ
BobbyZ

Reputation: 336

the way you describe it it should work just fine.

I made a jsfiddle DEMO

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

Upvotes: 1

Ryan Sparks
Ryan Sparks

Reputation: 309

Try adding display:inline-block; to the element.

Upvotes: 0

Related Questions