html - How do I place a button next to a heading?

Question

I thought using float: right; would fix this, but it makes the button appear outside of the div. How do I solve this?

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

question from:https://stackoverflow.com/questions/29578633/how-do-i-place-a-button-next-to-a-heading

Answer 1

Give your h1 display: inline-block to allow your elements to occupy the same row...

#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>