Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Michael Godard
5,399 PointsUsing pictures of different orientations/sizes to fit together like a puzzle
Not all of the photos i'm putting in my gallery are of the same orientation. Using the float leaves a big space in between the images if there is a portrait on one side and landscape on the other. Is there anyway to structure the gallery so that the images fit closer together (like a puzzle)?
2 Answers
Kevin Korte
28,149 Points3 options i can think of:
- Use CSS flex box layout. Flexbox can handle this sort of thing better than floats. Problem is flexbox is still relatively new, and browser support is catching up.
- Use a JS plugin like Masonry.
- Use CSS to resize and crop the images so they are the same size. This probably isn't the desired solution, but it's probably the easiest.
James Barnett
39,199 PointsYou can try something like this: http://codepen.io/jamesbarnett/pen/DKoCG
- This demo of http://www.code-pal.com/css3-based-masonry-layout-with-jquery-masonry-as-fallback/
- Combined w/ tip from http://pterkildsen.com/2012/12/08/css3-columns-in-internet-explorer-7-8-and-9/
- To use a JavaScript fallback for IE http://blog.gabrielsaldana.org/css3-columns-in-internet-explorer-and-other-unsupported-browsers/
Michael Godard
5,399 PointsThanks so much James. I like the idea of using CSS with Masonry as a fall back. You guys are the best.