How do I position two divs horizontally next to each other?

Question

On two different projects I learned two different methods of positioning two divs horizontally next to each other. Is one better than the other, or is it just a matter of personal taste, or maybe one is only working by coincidence?

Method one:

.container,
.div1,
.div2 {
  border: 1px solid red;
}

.div1,
.div2 {
  float: left;
}

<div class="container">
  <div class="div1">
    DIV1
  </div>
  <div class="div2">
    DIV2
  </div>
  <div style="clear: both;"></div>
</div>

Method two:

.container,
.div1,
.div2 {
  border: 1px solid green;
}

.div1,
.div2 {
  display: inline-block;
}

<div class="container">
  <div class="div1">
    DIV1
  </div>
  <div class="div2">
    DIV2
  </div>
</div>

Answer 1

The first one is more widely supported in older browsers, but float usually leads to some weird behavior (not bad, nothing that will break your design, just a little unexpected).

You'll crank away with inline-block only to find something broken in your design when you check some random browser later on in the lifecycle.

I usually stick with float, and only float.

EDIT

Revisiting this answer almost 10 years later and my recommendation now would be stick with flexbox and only flexbox. Try out https://flexboxfroggy.com/ if you need some practice.