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

Francis Ngo
Francis Ngo
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!

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

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
172,127 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
Samantha Atkinson
Front End Web Development Techdegree Student 18,014 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.