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

Ryan Connell
Ryan Connell
3,137 Points

Is there a benefit of doing floats this way as opposed to floating one column to the left and the other to the right?

I did my code like this...

.secondary { float: left; max-width: 40%; padding-right: 1em; }

.primary {
    float: right;
    max-width: 60%;
}

Is there a benefit of doing it the way in the video as opposed to the way I did it?

2 Answers

Nico Trivelli
Nico Trivelli
20,353 Points

Hi Ryan Connell ,

With regards to the floats, there are no visual differences. However, I am not sure if you've already heard (or watched smth here) about DRY programming. Well, long story short: DRY stands for Don't Repeat Yourself, and it's what all developers strive for in their code, i.e.: that there is no unnecessary repetition, which makes the code cleaner and can even have an impact on performance, too.

That is: your floats are different from Guil's code in that you have to declare them individually, when both columns are actually floated (share that attribute) and both have the col class.

Concerning the padding, your solution works, too, but not exactly the same way Guil's does. If you check in Developer Tools, you'll notice that with your code, you're giving it only 1em of gutter, and also that is the only padding of either column.

In Guil's code, he's giving 1em to the left and right of each column. That is: the "inner" and "outer" side of each column have the padding applied, not just between them. Also, if you add the 1em of padding-right from the first column to the 1em of padding-left from the 2nd column, you get 2em of gutter between them.

Check it in your dev tools, and you'll see it clearer. Try changing the values and checking the inner and outer padding of each.

Nico Trivelli
Nico Trivelli
20,353 Points

Sorry, just another comment, because I just realized. I think you're also placing them in the wrong order, but I'm not sure if that's required in the course? Don't take my word on this, but maybe take a look to make sure in the course.

Then why he used:

padding-left: 1em;
padding-right: 1em;

Instead of:

padding: 0 1em;
Ryan Connell
Ryan Connell
3,137 Points

Ya, the primary is on the right. Later a third column gets added for bigger screens so the primary is in the middle.

Thank you so much for the input and explanation!