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

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Gabino Garcia
Gabino Garcia
4,407 Points

Problems with "build a three column layout" with un-even images


So far, I'm having trouble following this exercise since I have one image that is taller.

following with the codes used in this exercise:

@media screen and (min-width: 480px) {

/* For a two column layout */

#primary { width: 50%; float: left; }

#secondary { width: 40%; float: right; }

/* 3-layout scheme for our gallery/works page */

#gallery li { width: 28.3333%; }

#gallery li:nth-child(4n) { /* Review your CSS again!!!*/ clear: left; }


Here's what it looks like when I expanded the browser size: alt text

and here's what it looks like when I shorten the size of the browser: alt text

the one with the light blue background is the third image while the one with the green background is the fourth...With the example in that video it should be positioned right next to each other...as you can see with my work it's not. Could be because the fourth image is a taller image unlike the others.

When I remove the nth-child css code it appears just the same..

Please help. Thanks

1 Answer

Drew Schott
Drew Schott
8,484 Points

The problem with the 3rd picture is because of the 1st image being taller than the 2nd. With such different sized images and heights of text boxes, maybe floating won't be the best option for you. Try adding a media query for a rsolution size of when it goes 2-column, and put a 'clear: right' on the 2nd child.