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
Andrew Donovan
2,171 PointsTwo column layout list element display troubles on personal website.
So, I adapted the website tutorial quite a bit to whip a personal website (http://www.andrewdonovan.org). I decided I liked using the <li> with the background text in these caption boxes, but it displays weird in two column layout. I've tried altering the relative values for #gallery li in the main and responsive.css:
main.css:
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: right;
width: 45%;
margin: 2.5%;
background-color: #4f6adf;
color: #bdc3c7;
}
#gallery li a p {
margin: 0;
padding: 5%;
font-size: 1em;
color: #fff`
}
responsive.css:
#gallery li {
width: 28.3333333%;
}
#gallery li:nth-child(3n + 1) {
clear: left;
}
Maybe I'm missing something crucial, or maybe it isn't worth it to display these text only links like this.
5 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Andrew,
The problem that you're seeing in the 2 column layout is the same problem that happens in the 3 column layout which nth-child(3n + 1) fixes.
All you need is another nth-child() expression in main.css to take care of the 2 column layout.
Add this to main.css:
#gallery li:nth-child(2n + 1) {
clear: left;
}
This will clear the 1st item of every row in a 2 column layout but you do need to set this clear property back to none in the 3 column layout or it will mess up that layout.
In responsive.css:
#gallery li:nth-child(2n + 1) {
clear: none;
}
#gallery li:nth-child(3n + 1) {
clear: left;
}
This should fix the problem you see in the screenshot and produce 2 per row aligned at the top. You won't have equal height boxes though which you don't have in the 3 column layout either.
You can bring flexbox into this if you want equal height boxes but it should be considered a fallback as it doesn't have 100% support. You can do it with http://modernizr.com/ to detect support for it.
So you can do the floats and nth-child clearing to get everything in rows then if you detect flexbox support you can override that css and use flexbox instead to have equal height boxes. Consider the equal heights an enhancement.
Here's a support table for flexbox: http://caniuse.com/#feat=flexbox
Be sure to check the resources tab. There is a dev.opera article on cross browser flexbox which could be useful here.
Rostislav Kavan
6,818 PointsWhat is your goal?
You have width 28% for big screens and 45% for small screens, therefor 2 column layout.
Clear left is not doing anything in this case, you are clearing elements which are situated to the left side.
Rostislav Kavan
6,818 PointsOk.
I think this is typical problem. You know, with different amount of content in individual boxes, you get different heights. And since the element on the left/right has different height, it causes these disruptions. Now the popular and modern method to fix this is to use Flexbox (there is a full section in CSS course) or set fixed height for the boxes (not responsive, with different user font or size, it may not fit properly).
That way they will be aligned nicely with only set margin visible as space between them.
Andrew Donovan
2,171 PointsFirstly, thank you for your response.
I am thinking about it visually. When I move to a two column layout, one of the <li> elements seems to get pushed away from the others significantly. It seems like the footers or headers are being stacked or something, creating extra space between the elements. A screenshot of the problem I'm talking about:
Andrew Donovan
2,171 PointsThank you very much, Rostislav! I will look into Flexbox and see if I can resolve the problem that way. I may also start thinking about another way to display these items all together.
Andrew Donovan
2,171 PointsAndrew Donovan
2,171 PointsJames, thanks so much for your reply. I made those changes to the website and moved them into production, but I seem to be having the same issue. Did I perhaps mistake something about where to put those lines of code?
I couldn't see having much effect in my editor preview, but it didn't seem to hurt anything either.
Http://andrewdonovan.org
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsWhose James? :)
I missed it before but I see you have your list items floated right instead of left. I assumed they were floated left like the project.
clear: lefthas no effect on items floated right.I would change your list items to float left instead of right.
At this point you should have even rows of 2 on mobile and then you'll have to decide if you want equal height boxes or not.
Before going through that trouble one thing that you can do to see if it will be worth it is to give all your list items a fixed height of around 125px and then size it down to just below the 480px breakpoint. That will give you an idea of what it will look like with equal height boxes. It just gives you a quick way to decide which you like better. Equal height boxes or let each box be as tall as the content.
Andrew Donovan
2,171 PointsAndrew Donovan
2,171 PointsAh, sorry I got your name wrong in a hurry there, Jason. Thanks for following up despite that! I'll look into the fixed height boxes now.
Andrew Donovan
2,171 PointsAndrew Donovan
2,171 PointsWell, Jason, I tried it and I think the fixed height works alright. Realistically, I might want to think about the display of those publications differently. Anyway, I really do appreciate your help and I'm happy with this solution! Thank you very much!
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsYou're welcome.
Sorry if I misled you but I was only suggesting the fixed heights as a quick test in order to see what it might look like if you decide to use flexbox. You should remove the height after looking at it. Generally it's a bad idea to set the heights on any elements which contain re-flowable content.