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

Francis N
Francis N
10,376 Points
Posted by Francis N
Francis N
10,376 Points

Here is my solution. Is this a good practice?

https://w.trhou.se/le14kxgcbn

Instead of creating a .col rule with padding left and right. I made two rules. .secondary to float left and .primary to float right. Then I set the margin and width so that they can fit next to each other instead using the video's solution method. I can see my method may require some math but I feel like the font looks better if you adjust the margin rather than the padding. Is this okay? Is this good practice? Thanks!

meowls
meowls
6,840 Points

If you want to still keep the widths 40% and 60% and create space with padding without messing up the alignment of the text, you could also just add right padding to the left-floated column (secondary) and padding left to the right-floated column (primary).

3 Answers

Evan MacAlpine
Evan MacAlpine
7,173 Points
Evan MacAlpine
Evan MacAlpine
7,173 Points

I used a similar solution as well and, typographically, I did prefer it since it avoided the outer margins that cause the columns to lose alignment with the elements in the header (logo and menu elements). One thing I did prefer in the instructors approach was the use of padding as opposed to margins. This allows you to still use the 40%/60% widths instead of calculating appropriate width+margin percentages. As for whether this approach is best practice on larger projects I cannot say, but typographically I do prefer it.

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

I would not have expected that adjusting margin vs. padding would have any impact on the appearance of the font.

It might be interesting to compare methods side-by-side if you were to also set up an example using the other method.

Samantha Atkinson
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Samantha Atkinson
Front End Web Development Techdegree Graduate 40,307 Points
Samantha Atkinson
.a{fill-rule:evenodd;}techdegree seal-36
Samantha Atkinson
Front End Web Development Techdegree Graduate 40,307 Points

I also used 2 rules for the .primary and .secondary classes, but I added the padding to each rule to create the separation. I think using two rules is fine as it is what he did before, during CSS Basics for the landing page. The way he did it this time creates less lines of code, but more importantly, if you decided to change the order of the columns, with the 2 rules version you would have to change 2 values for 2 float properties. With his version you only have to change one.