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

CSS How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Posted by Josh McMullin
Josh McMullin
3,012 Points

Styling different image galleries

Greetings,

I'm working on creating an image gallery based on the concepts I've learned from here. I'd like to know how to organize the photos so the images are positioned in different points within the ul. For instance, I might want to have two photos next to each other (one being larger than the other), and beneath that, I might want to have one image centered between the two on top, and so on. What's the best method to do so?

3 Answers

David Perkins
David Perkins
9,607 Points
David Perkins
David Perkins
9,607 Points

Hi Josh!

If you can post a sketch of what you're wanting to achieve, i'm sure you'll get some help with regards to the coding of it :)

Josh McMullin
Josh McMullin
3,012 Points
Josh McMullin
Josh McMullin
3,012 Points

Hello, I've created a basic sketch of what I am looking for. http://www.gliffy.com/go/publish/6976777

Pavle Lucic
Pavle Lucic
10,801 Points
Pavle Lucic
Pavle Lucic
10,801 Points

Hi Josh,

That effect is called masonry. http://masonry.desandro.com/

There is a greate javascript plugin, which you can include in your page.

It aquire little more front end skills, but there are a basic stuff. Just follow instructions on website.