Joe F Joe F - 26 days ago 4
CSS Question

position button next to each other

I want to display my Back and Confirm button next to each other. As you can see I tried doing display:inline-block but it didn't work. I think there might be some conflicting codes but I'm not sure where it is. This might be a dumb question but bear with me please.

Here's my code:



.form__confirmation {
padding: 0px 55px;
}

.form__confirmation2 {
padding: 0px 55px;
}

button {
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
background-color: #011f4b;
border: 1px solid #DADDE8;
color: #fff;
padding: 18px;
border-radius: 5px;
outline: none;
-webkit-transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
left: 350px;
margin-bottom: 20px;
display: inline-block;
}

button:hover {
background-color: #1293e1;
}

button:active {
background-color: #1083c8;
}

<div class="form__confirmation" type="submit" name="submit">
<button>Confirm Information</button>
</div>
<div class="form__confirmation2">
<button>Back</button>
</div>





Here's what it looks like

Answer Source

.form__confirmation,.form__confirmation2 {
      display: inline-block;
		}
<div class="form__confirmation" type="submit" name="submit">
  <button>Confirm Information</button>
</div>
<div class="form__confirmation2">
  <button>Back</button>
</div>

You are placing them within div elements, which are display:block by default. Either include both buttons within the same div or use div{display:inline-block}.