Two column layout challenge: Why not simply using primary {float:left} and secondary {float:right} writing less code?

Hi Frank,

I personally hardly ever use inline-block to place my elements side by side. It's a good alternative to have though.

Why would you use inline-block?

Well for one using inline-block always you use the 'vertical-align' property. You can then position your elements at the top, middle and bottom of a container with one selector.

If you were to try and position a div vertically centered normally you'd have to use css3 selectors like transform to make that happen.

Also lets say you have a span element which is inline be default, what if you needed padding or margin on that element? You can't because it's inline. However, if you make it 'display: inline-block' now you can adding padding and margin.

I personally prefer floating, but there may be occasions you'd use inline-block.

@media (min-width: 769px) {
.col {
  width:50%;
  }
  .primary{
  float: left;
  }
  .secondary {
  float:right;
}
}

That's how i did it.

I don't believe the float property was created to be used as a layout technique. It serves a different purpose. Although it works for creating layouts, I don't like to use it because you have to work around it collapsing columns if you don't use a clearfix. It can behave kind of weird.

I prefer using the "display: inline-block" rule because you have more control over how things will layout, aside from the browser rendering the space IF you leave a space between two tags closing and opening.

Everyone will have their own way of doing things, so until there is a full-proof method (fingers crossed for flexbox), I would say anyone is welcome to using their own method, but it would be best to understand how each one works and why before making your decision.

I think it has less to do with this method being the best method, and more to do with teaching the underlying concepts. These classes aren't about best practices (although sometimes they are, and many times tips on best practices are mentioned) but it's about giving you the building blocks. So when you learn about flex box you can see how it is superior to the other methods. Instead of just knowing how to use flexbox period.

I also used float as my solution to solve the problem, it came more natural to me. And gave me good results.