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 trialMalcolm Stretten
3,814 Points.primary-col and .secondary-col
Why does Guil first define .col and float it left and THEN define .primary and .secondary and just define their widths?
I thought you just had to define .primary-col and float it right at 60% fluid width and then define .secondary-col and float it left at 40% - but that doesn't do anything. Surely primary-col is a class and secondary-col is another class. Why is it split into 3 classes: .col .primary and .secondary????
2 Answers
Steven Parker
231,122 PointsThe shared class "col" allows you to apply all the properties that are common to the columns using just one rule. This makes the code more compact than repeating the common properties in separate rules, and implements the "DRY" principle ("Don't Repeat Yourself!").
Then the individual classes of "primary" and "secondary" allow you to target each column individually to apply only the properties that are different.
You could have classes with names like "primary-col", but they would need to be matched by the CSS selectors. And it would provide no functional difference from using the name "primary". The hyphen has no significance to CSS.
Richard Verbraak
7,739 PointsHi Malcolm,
First, I am no expert on CSS floats, I find them tricky to use compared to other techniques you'll learn later on but I'll try my best explaining. (someone feel free to correct me if I'm wrong here)
Guil first floats both columns left so they appear on the same line, he targets them with the class .col since both columns share that class.
Then he defines a width for both of them, so that each of the columns appear next to each other. He does this with their respective classes like .primary and .secondary.
Jamie Reardon
Treehouse Project ReviewerYou are correct Richard, to expand on your width explanation, the teacher applies a width property separately to the classes primary and secondary because he wanted different widths. Hence why the name primary should be the main centre point of view, and in general, probably would have a slightly wider width than other columns. However, that is just theoretical practice and each design is different in layout.
Nevertheless, If the widths of the columns were to be the same, you could simply put the width property into one rule thus the .col rule.
Malcolm Stretten
3,814 PointsMalcolm Stretten
3,814 PointsThank very much for your answer.