How to place the button to the corner of a div?-CodePudding

What is the correct way to place the x on the right instead of left?

If I place right:0

it will only clump the buttons together, what's the proper way to format this?

Also is this the correct way to place squares inside of a container? Please see codepen, thanks!

<div id="parent">
  <div id="wide">
    <div id="box">
      <button id="x">
        X
      </button>
    </div>
    <div id="box">
      <button id="x">
        X
      </button>
    </div>
    <div id="box">
      <button id="x">
        X
      </button>
    </div>
    <div id="box">
      <button id="x">
        X
      </button>
    </div>
  </div>
</div>

#parent {
  display: flex;
  width: 920px;
  height: 400px;
  position: relative;
}
#wide {
  flex: 1;
  width: 1050px;
  height: 350px;
  display: inline-block;
  position: relative;
  background: lightgreen;
  overflow: scroll;
  white-space: nowrap;
}

#box {
  display: inline-block;
  background: #000;
  width: 300px;
  height: 299px;
}
#x {
  position: absolute;
  background: red;
  color: white;
  right: 0;
}

CodePudding user response：

three issues: 1) a couple of misspellings 2) id's must be unique 3) wrong use of relative

#parent {
  display: flex;
  width: 920px;
  height: 400px;
  position: relative;
}
#wide {
  width: 320px;
  height: 350px;
  background: lightblue;
  display: inline-block;
  white-space:nowrap;
 
}
#narrow{
  flex: 1;
  width: 1050px;
  height: 350px;
  display: inline-block;
  position: relative;
  background: lightgreen;
  overflow:  scroll;
  white-space:nowrap;
  position: relative;

}

.box{
    display: inline-block;
    background: #000;
    width: 300px;
    height: 299px;
    position:relative;
    }
.x {
    position: absolute;
    background: red;
    color: white;
    right: 0;
}

<div id="parent">
  <div id="narrow">
     <div class ="box"></div>
  </div>
  <div id="wide">
    <div class ="box">
      <button class = "x">
            X
       </button>
    </div>
    <div class ="box">
            <button class = "x">
            X
       </button>
    </div>
    <div class ="box">
            <button class = "x">
            X
       </button>
    </div>
     <div class ="box">
        <button class = "x">
            X
       </button>
     </div>
  </div>
</div>

CodePudding user response：

You've misspelled the right:0; keyword in your CSS. (Edit: Give the parent id #box position:relative; to avoid the child getting out of bound)

Alternatively, you can probably remove the position:absolute; and right:0; and just replace it with float:right;.

CodePudding user response：

The parent div has to have position: relative; In this case, I assume it is the #box div.

CodePudding user response：

You can use like this:

<style>
#x {
    position: absolute;
    background: red;
    color: white;
    rigth: 0;
}
</style>
<button id="x">X</button>