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
Ryan Connell
3,137 PointsIs 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 dev
20,364 PointsHi 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.
Ryan Connell
3,137 PointsYa, 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!
nico dev
20,364 Pointsnico dev
20,364 PointsSorry, 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.
Baraa Al Abdullah
6,527 PointsBaraa Al Abdullah
6,527 PointsThen why he used:
Instead of:
padding: 0 1em;