CSS CSS Layout Basics CSS Layout Project Introducing the Project

I 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!

SAMUEL LAWRENCE
SAMUEL LAWRENCE
Pro Student 8,447 Points

Hi 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.

4 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 87,611 Points

Hi 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.

Quick question, I understand the padding portion of what you're recommending, but what does the value wn mean?

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 87,611 Points

I’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 ;)

Ok, 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 :).

You 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%; }