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

CSS CSS Layout Basics Page Layout with the Float Property The Float Challenge Solution

Malcolm Stretten
Malcolm Stretten
3,814 Points
Posted by Malcolm Stretten
Malcolm 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
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

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

Malcolm Stretten
Malcolm Stretten
3,814 Points
Malcolm Stretten
Malcolm Stretten
3,814 Points

Thank very much for your answer.

Richard Verbraak
Richard Verbraak
7,739 Points
Richard Verbraak
Richard Verbraak
7,739 Points

Hi 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

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