Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.


Two columns layout scheme

I want to imitate the two columns layout scheme shown in the Nick Pettit personal portfolio, but although I try I cannot make it happen...What would be the basic coding in order to make a responsive two columns image gallery with divs instead of li elements? I'm a little bit lost here, please help!

1 Answer

Zack Lee
Zack Lee
Courses Plus Student 17,650 Points

You can use floats. Create your divs then float them all left. Make sure theyre small enough that you can display 2 side by side.

Then use the nth-child selector to select every 2nd div starting from the 3rd div and set it to clear left. This will cause the 2 divs to float side by side while the 3rd will break to the next line 4th will sit next to 3rd then 5th will break to new line etc.

Make sure you use a clearfix to keep the divs from collapsing.

Terms to look up: Float Clear Nth-child selector Clearfix

It worked! Thank you Zack Lee