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

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
PLUS
Zack Lee
Courses Plus Student 17,662 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