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;
}
>Solution :
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>