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

Luqman Shah
Luqman Shah
3,016 Points

My Method vs His

This is how I did it:

.primary {
float: left;
}
.secondary {
float: right;
}
.primary,
.secondary {
width: 48%;
display: inline-block;
}

This is how he did it:

  .col {
    display: inline-block;
    width: 50%;
    margin-right: -4px;
    vertical-align: top;
    padding-left: 1em;
    padding-right: 1em;
  }

Both seemed to have the same results, maybe minor differences. But which is best? (obviously I'd assume his), but I'd like to know your thoughts and advice. I know that floats won't be introduced until the next section of the course, but we learned about it in the css basics course so I thought I'd just use that here.

1 Answer

Steven Parker
Steven Parker
231,269 Points

There's rarely only just one "right" way to do anything. But that said, a couple of factors stand out for me here:

Since both elements share the class "col", it makes more sense to put properties they have in common in a rule that targets that class than in one that targets both of their unique classes.

Also, using floats can require additional code to be added (such as a "clearfix") to avoid unwanted side-effects. So generally if the desired effect can be created without using floats, that's a better choice.

Luqman Shah
Luqman Shah
3,016 Points

Thank you as always, Steven :)