CODEWITHSUNDEEP
htmlcssbutton
Joe F
Joe F

Reputation: 163

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

Upvotes: 0

Views: 1052

Answers (2)

Tejasvi Karne
Tejasvi Karne

Reputation: 648

.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}.

Upvotes: 1

dvr
dvr

Reputation: 895

You need to apply display: inline-block; to your container Like so:

.form__confirmation {
		  padding: 0px 55px;
      display: inline-block;
		}
		
		.form__confirmation2 {
		  padding: 0px 55px;
      display: inline-block;
		}

		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>

Upvotes: 1

Related Questions