How do I place a button next to a heading?

Issue

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

Solution

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>

Answered By – Turnip

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.