CODEWITHSUNDEEP
css
user4752928
user4752928

Reputation:

Move buttons below text

I am trying to figure this out. My goal is to have the two buttons... the yes and no buttons to show below the text. I can change the html ofcourse, but I want/need to do it with CSS only. Possible?

.box {
  background-color: yellow;
 }
 
.yes {
  background-color: green;
  padding: 10px;
 }
 
.no {
  background-color: red;
  padding: 10px;
 }
<div class="box">
<button class="yes"><span>yes</span></button>
<button class="no"><span>no</span></button>
Here you can vote
</div>

Upvotes: 1

Views: 8982

Answers (4)

Hai Dinh
Hai Dinh

Reputation: 1513

The first thing, you can use float: right attribute to float 2 buttons "Yes" and "No" to the right.

The second thing, you can use margin-top to move down 2 buttons "Yes" and "No" to the bottom of the text.

The Third thing, you can use left position to set the width of these two buttons with the left side.

The final thing, you can use the position absolute attribute to fix the position of these two buttons.

Hope it help, regard!

.box {
  background-color: yellow;
 }
 
.yes {
  background-color: green;
  padding: 10px;
  float: right;
  margin-top: 52px;
  left: 0;
  position: absolute;
 }
 
.no {
  background-color: red;
  padding: 10px;
  float: right;
  margin-top: 52px;
  left: 40px;
  position: absolute;
 }
<div class="box">
<button class="yes"><span>yes</span></button>
<button class="no"><span>no</span></button>
Here you can vote
</div>

Upvotes: 1

philr
philr

Reputation: 1940

I am not a fan of using position: absolute; on anything unless it is absolutely necessary or you know exactly what you're doing. Instead you can wrap your buttons in another container and then make your .box a flex-container with direction column. like this: 

.box {
  background-color: yellow;
  display: flex;
  flex-direction: column;
 }
 
.yes {
  background-color: green;
  padding: 10px;
 }
 
.no {
  background-color: red;
  padding: 10px;
 }
<div class="box">

  <div class="btn-wrapper">
    <button class="yes"><span>yes</span></button>
    <button class="no"><span>no</span></button>
  </div>
  
  Here you can vote
</div>

fiddle: https://jsfiddle.net/1yz4gfdv/

Upvotes: 2

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7299

Wrap your buttons inside a <div>

.box {
  background-color: yellow;
}

.yes {
  background-color: green;
  padding: 10px;
}

.no {
  background-color: red;
  padding: 10px;
}
<div class="box">
  Here you can vote
  <div>
  <button class="yes"><span>yes</span></button>
  <button class="no"><span>no</span></button>
  </div>
</div>

CSS Way which you are expecting

.box {
  background-color: yellow;
  height: 30px;
  line-height: 30px;
}

.yes {
  background-color: green;
  padding: 10px;
  top: 40px;
  position: absolute;
}

.no {
  background-color: red;
  padding: 10px;
  top: 40px;
  left: 50px;
  position: absolute;
}
<div class="box">

  <button class="yes"><span>yes</span></button>
  <button class="no"><span>no</span></button> Here you can vote
</div>

Upvotes: 1

jayly
jayly

Reputation: 156

Without editing your HTML at all you can indeed use CSS to move the buttons below (although editing your HTML would be easiest). Something like this would work:

.box {
  background-color: yellow;
  overflow: auto;
  height: 100px;
  position: relative;
}

.yes {
  background-color: green;
  padding: 10px;
}

.no {
  background-color: red;
  padding: 10px;
  left: 50px;
 }

button {
  position: absolute;
  top: 30px;
}

Upvotes: 1

Related Questions