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
Stephen Chamroeun
7,095 PointsI am trying to float the tertiary class to the right of the other two left-floated columns, but it stays at the bottom.
Here is my current code, https://w.trhou.se/lp0q5djwh3
I am trying to float the tertiary class to the right of the other two left-floated columns, but it stays at the bottom... I've tried to do a vertical alignment property, so that it can align with the other two columns, and I've tried to tinker around with the margin property to see if I could somehow pull the element to the top, but it's not working... well, maybe atleast in the way I am trying to do it. Any suggestions? In the meantime, I'll check out my other resources in case I find the answer myself. Thank you guys in advance for helping out!
4 Answers
Jonathan Grieve
Treehouse Moderator 91,252 PointsHi Stephen,
You should start by removing the clear property from line 172 on your CSS.
Once you do that, the columns should line up at the top. You only need to use the clear property as part of a "clearfix" which youy use elsewhere in your code.
I also notice your tertiary column doesn't have any padding applied. Try adding padding-top with a value of 1wn, on line 172 of your CSS so it matches the other columns.
Stephen Chamroeun
7,095 PointsQuick question, I understand the padding portion of what you're recommending, but what does the value wn mean?
Jonathan Grieve
Treehouse Moderator 91,252 PointsI’m sorry, that’s a mistake in my post I didn’t pick up on.
Where I said wn I meant the em relative unit. So put 1em as the padding value ;)
Stephen Chamroeun
7,095 PointsOk, that's fine. I didn't know if it was a mistake or not, so I looked it up and just applied the em value anyways haha. But thank you for this response. It looks good from everything I applied. I'll probably be different when I move to the next video, but everything is fun to learn so far :).
tari
6,812 PointsYou can use this code to make sure that all the three columns show up side by side.
.col { float: left; padding-left: 1em; padding: 2em; }
.primary { width: 40%; }
.secondary, .tertiary { width: 30%; }
SAMUEL LAWRENCE
Courses Plus Student 8,447 PointsSAMUEL LAWRENCE
Courses Plus Student 8,447 PointsHi at Stephen Chamroeun I tried opening you link but the names get squashed at the top and I can't access the css folder, so I couldn't see your css file. However I noticed you left the html code the same as Guil wrote it. In my challenge I wrapped the three sections, primary, secondary, tertiary in a containing div. I then for the 769px breakpoint I gave secondary and primary a width of 50% and tertiary a width of 100% and since they all had a class of .col I floated the col class left. Because tertiary has a width of 100% it will remain at the bottom of the other two and since both primary and secondary has a with of 50% they will float next to each other. Then to get them to align at the top I gave the containing div I created earlier a class of .clearfix. That made it align at the top. It's similar to how Guil taught it to us. I haven't looked at the solution video yet, so i don't know if he did it differently, but that way worked well for me.
Then in the 981px breakpoint for larger screens I simply gave secondary and tertiary a width of 30% each and primary a width of 40%. I didn't need to change the float property since anything above 769px all ready has been set to float left.
You can't apply the clear both to the sections themselves. Remember Guil said that to clear the floated elements inside the container your apple the clearfix to the parent element of the floated elements so that's why I first wrapped them in a containing div in my html.
Here's my workspace. I usually work on my own computer with the atom code editor app then I copy the code back into workspace. Depending on internet connection it's slow at times. https://w.trhou.se/6i01z1vjb7
hope this was helpful. gonna check out the solution video now.