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.

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

Hi,

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.