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

Carson Clark
Carson Clark
2,159 Points

Responsive web design issue.

I am on the section "build a three column layout" and I'm at the end of it. I'm trying to correct the awkward spacing I get (see picture below) and I'm not sure how. I've applied the code that the instructor was but it's not helping for some reason.

Picture of the layout I'm trying to correct: http://i.gyazo.com/cf475cc70498f7f7480dd0f84777b38c.png

Picture of my code: (css) http://i.gyazo.com/044d8c816aeee491fad9d3b1ac51782d.png

Picture of code: (index) http://i.gyazo.com/647c4ded5d0573fb26e272508df95d13.png

I am not sure where to go from here! Please help!

Thanks TTH.

8 Answers

Hi Carson,

I think part of the confusion here is that the solution in the video for this problem :nth-child(4n) was specifically for the 3 column layout. This doesn't kick in until you're at 480px or above. Since your screenshot shows the 2 column layout your browser width must have been below 480px when taking that screenshot. As you've discovered, the problem exists for the 2 column layout as well but requires a different :nth-child expression.

Also, you should take a look at the Teacher's Notes for this video. 4n was not the correct expression for 3 column layout. 3n+1 is correct.

The problem is that we have variable height items due to the captions. Some will be longer and wrap to more lines making those list items extend down farther. Since the 3rd item doesn't have enough room on the first row it is pushed down just enough until it can fit. So it's pushed down below the 2nd item so that it can slide left but it stops when it hits that 1st item which extends down lower. Since that 3rd image now fits inside the container it stays right there. Floated items are only pushed down the minimum needed to fit inside the container.

Now the 4th item can't fit in the second row so it is pushed down below the 3rd image and then since there's nothing else in its way it is able to slide all the way to the left, and so on with the 5th, etc....

By having this 3rd item clear the float, we're saying that it needs to drop below all previously floated items. So this 3rd item will be pushed down below both the 1st and 2nd image which allows it to slide all the way to the left.

So we need to clear the float on the first item of every row. In a two column layout this would be the 1st, 3rd, 5th, 7th,... or every odd item.

The correct expression would be :nth-child(2n+1) or use the keyword "odd" :nth-child(odd) Both of these are equivalent. Again, this is specifically for the two column layout at smaller widths and should go in main.css

main.css around line 118:

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li:nth-child(odd) {
  clear: left;
}

In responsive.css:

#gallery li:nth-child(odd) {
    clear: none;
}

#gallery li:nth-child(3n + 1) {
  clear: left;
}

In the 3 column layout we don't want the odd items to clear the float anymore so we have to remove that clear on the odd items then we can set the correct items to be cleared for the 3 column layout. The first item in every row for 3 columns would be 1st, 4th, 7th, and so on. 3n + 1 is the correct expression to select those.

I hope that clears it up for you.

Carson Clark
Carson Clark
2,159 Points

My friend you are a gentleman and a scholar! Thank you so much!

You're welcome.

This helped, Jason. Thank you for your correct answer. You are making a great input here, helping newbies like me. Vote up for you (not much more I can do for your help) :-)

Cheers!

Zerui Ma
Zerui Ma
5,422 Points

I found the problem, you deleted some of the words that Nick has typed in 2nd pic, so that when the first pic display 2 rows of description, the second pic only display 1 row of description. That has squeezed the 3rd element to the right.

I have tried few ways myself, I tried to clear float of 3rd element, but then it would be a mess for 3 column display.

So I guess one quick and dirty way to fix it is to add enough white spaces after your 2nd description so that it will maintain the same behavior with the 1st element.

Or perhaps using flex layout instead of float would be a nicer solution but it's beyond the scope of your 1st lesson.

I'm pretty new to responsive web design as well, I hope someone like Nike would give you a more professional answer.

Carson Clark
Carson Clark
2,159 Points

While I kind of understand what you mean I'm still unsure how to resolve this issue. Thanks though!

Zerui Ma
Zerui Ma
5,422 Points

I think Nick has provided solution in the video, maybe later on? I can't remember, but you'll need clear float specifically for the 4th element to avoid that, since the 1st element has squeezed the 4th element aside.

Here's the code you'll need:

#gallery li:nth-child(4n){
        clear: left;
    }
Carson Clark
Carson Clark
2,159 Points

Yeah he did mention that, and it made sense so I Applied it, but for some reason I still get the same result. I'm not sure why! Thanks

Carson Clark
Carson Clark
2,159 Points

Yeah he did mention that, and it made sense so I Applied it, but for some reason I still get the same result. I'm not sure why! Thanks

Zerui Ma
Zerui Ma
5,422 Points

Then I'm not sure why...

1.Did you follow all the step in the video?

2.Did you saved all your changes?

3.Did you tried to close and reopen your browser window?

Carson Clark
Carson Clark
2,159 Points

I believe so. I can't find any errors. Yes, I'm always saving. I did now, the problem still persists. This is strange.

Aldo Merino
Aldo Merino
6,066 Points

U can give a idea when u zoom out the page (ctr -) the font decrease and it no longer take space of the 3d element of the list (where the problem take place). what i did was remove the margin and padding of the paragraph of the images.

I tough giving at the proper @media the nth-child(3n) a clear:left could solve this but still the problem show up =/

I hope someone could find a proper solve to this problem

(excuse for my bad typo, English is not my native)

Carson Clark
Carson Clark
2,159 Points

I couldn't really understand your English! sorry man!

Aldo Merino
Aldo Merino
6,066 Points

my english is that bad? DX. well seems like i must take a course of english of how to type correctly, thx aniways =)

Carson Clark
Carson Clark
2,159 Points

Ok so yeah, when I remove some words from the 1st image the problem goes away so I understand why this is happening which is good! Still not sure how to properly fix this issue though.

Ryno Botha
PLUS
Ryno Botha
Courses Plus Student 4,055 Points

Hey try this:

#gallery li a p {
  margin: 6%;
  padding: 5%;
  font-size: 0.75em;
  color: #000 /*#bdc3c7*/;
}

Increase your margin, look at how it effects the page, should work ^^

Carson Clark
Carson Clark
2,159 Points

Still didn't work :( This is really starting to frustrate me! >:/

Thanks for your help though!

Ryno Botha
Ryno Botha
Courses Plus Student 4,055 Points

Another way you can fix it is by removing the Font-size:

#gallery li a p {
  margin: 6%;
  padding: 5%;
  color: #000 /*#bdc3c7*/;
}

Go to your page, and use "Inspect Element" and change a few things and test how everything effects the page ^^

Zerui Ma
Zerui Ma
5,422 Points

Changing all the style of p elements won't help... See my analysis

But just changing the style of 1st and 2nd element might help, but it might cause other issues

I think the easiest way is just adding some white spaces in the 2nd p elements

Ryno Botha
Ryno Botha
Courses Plus Student 4,055 Points

Also change the Padding in #gallery li a p

"Inspect Elements" on your page and just change the padding, margin and font size, always the way to look for the problem ^^

Also look at these links:

http://www.coffeecup.com/forums/website-design-and-development/css-float-clear-position-margin-paddingaarrgh/

http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

http://css.maxdesign.com.au/floatutorial/

Hope you get it working ^^