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

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>