CODEWITHSUNDEEP
htmlcss
Richard H
Richard H

Reputation: 39055

Fixed-width elements that wrap

I have a bunch of thumbnails that I wish to display in my page. The widths of the thumbnails are not necessarily all the same, and neither are the heights. What I'd like to do is arrange them in a tabular format such that elements line up in neat rows and columns with each "cell" being an equal, specified width.

I do not want to use a table as I would like the number of rows/columns to automatically re-size with a browser re-size.

I've tried sticking the images in:

  1. divs of fixed-width with float left. The problem is because of unequal heights, wrapped divs might "catch" on the bottom of a div on the row above.

  2. spans and lis: setting width: 200px or whatever doesn't seem to fix the width; however they do wrap fine.

Upvotes: 2

Views: 1349

Answers (3)

gilly3
gilly3

Reputation: 91497

If you use display: inline-block on your spans or lis, that should allow you to set the width.

http://jsfiddle.net/bnmPR/

Upvotes: 5

David Nguyen
David Nguyen

Reputation: 8528

you can still use you divs that float left and add this script: http://masonry.desandro.com/

It will push the divs up vertically so that they are beside each other.

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34855

You could use lis and make them display:inline-block;

http://jsfiddle.net/jasongennaro/zDC2w/

Drag the window over to see it work.

borders, width, and height added to show effect

Upvotes: 2

Related Questions