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
Kellen James
Front End Web Development Techdegree Student 1,934 PointsResponsive Layout Project - How to split #ID Gallery into three column layout using CSS?
After following along with the CSS-Basics course I noticed that Gil uses primary, secondary, and tertiary columns to split his columns into three - He was not using an unordered list. Should I be using an unordered list to display the mock-up images in the project files? It seems that I cannot target the ul list in my CSS and split the columns in three. Thanks.
Cezary Burzykowski
18,291 PointsHello Kellen,
I have took a look into your code. First of all primary, secondary and tertiary are class names and you are targeting them as if they were id names (you use #primary in your responsive.css file).
I'm not sure what you would like to achieve, now you have two divs with class .col and classes .primary and .secondary. This divs are at the top of your page and they contain only info about you and a mock-up for you profile image. They do not affect the layout of you "portfolio" section.
My question is - would you like to display projects in "portfolio" section in three columns?
If yes then you should target <li> elements that are inside your <ul id='gallery'>. Try setting width of those<li> elements to 30% and floating them to left. Then add a proper styling like like `width to your img elements inside "portfolio" sections (because they are very big at the moment and they will break you layout).
Keep an eye for typing errors (line 40 in index.html file), the might affect you layout aswell.
Let me know if you have any furter questions and good luck :)
3 Answers
Cezary Burzykowski
18,291 PointsHey Kellen,
I'm glad I could help :)
When it comes rules of thumb while using DIVs - generally you should use DIVs to gather elements from a certain section.
For example, if I would work on the blog platform I would create a separate DIV for each of the blog posts. This DIV would contain img (picture for the post), h1 (post title) and p (preview of the article text). If I would like to have 3 blog posts in one row I would give each of the DIVs width: 33.333% and a float: left.
Remember that you can achieve the same effect using various techniques and elements so there is no one right way :) Also floats are not the best choice but don't worry about it for a moment. Soon you will learn about FlexBox layouts which will make managing multiple elements on the page even easier
Kellen James
Front End Web Development Techdegree Student 1,934 PointsThank you so much Cezary :). Your advice was very helpful. I was trying to split my images into three columns. I targeted the Gallery List Items, set a 33.333% width and float:right in the main CSS file. Also appropriate width to the image files I was able to generate a nice looking layout. Can you tell me your rule of thumb when using DIV's? I'm still a little unclear as to when I should or should not be using them. I sometimes put them in the wrong places. Thanks again!
Kellen James
Front End Web Development Techdegree Student 1,934 PointsThank you again Cezary :) you have been a big help to me.
Kellen James
Front End Web Development Techdegree Student 1,934 PointsKellen James
Front End Web Development Techdegree Student 1,934 Pointshttps://w.trhou.se/jsol4bdmxj