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

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
172,196 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

Thank very much for your answer.

Richard Verbraak
Richard Verbraak
7,687 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
Jamie Reardon
Front End Web Development Techdegree Student 10,524 Points

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.