¿Cómo coloco un botón al lado de un encabezado?

pensé en usar float: right; arreglaría esto, pero hace que el botón aparezca fuera del div. ¿Cómo puedo solucionar esto?

HTML

<div id="main">
  <h1>Title</h1> <button>Button</button>
</div>

CSS

#main {
  width: 200px;
  border: 1px dotted black;
}
h1 {
  margin: 0;
}
button {
  float: right;
}

JSFiddle

Entrega tu h1 display: inline-block para permitir que sus elementos ocupen la misma fila…

#main {
  width: 200px;
  border: 1px dotted black;
}
h1 {
  margin: 0;
    display: inline-block;
}
button {
  float: right;
}

<div id="main">
  <h1>Title</h1> <button>Button</button>
</div>

Prueba así:

#main {
  width: 200px;
  border: 1px dotted black;
}
h1 {
  margin: 0;
}
button {
  float: right;
}

<div id="main">
  <h1> Title <button>Button</button></h1> 
</div>

DEMO DE JSFDDLE

o puedes usar el display:inline para que aparezcan uno al lado del otro.

Otra gran opción es el uso de flexbox así:

#main {
  width: 200px;
  border: 1px dotted black;
  display:flex;
}
h1 {
  margin: 0;
}

Opcionalmente puedes agregar justify-content:space-between como esto

#main {
  width: 200px;
  border: 1px dotted black;
  display:flex;
  justify-content:space-between
}
h1 {
  margin: 0;
}

o elige cualquier otra propiedad de flexbox

Aquí hay una guía completa de Flexbox