Here is the box I created:
BOX
Now, I want to position another box near the input of the BET box.
<div id="x2"></div> <!-- HTML --->
/* CSS */
#x2{
width: 40px;
height: 40px;
background: cornflowerblue;
}
The layout after adding the new box: BOX-AFTER
However, it seems to have affected the thin gray line and content below it. I am unsure why this happened.
Below is the HTML code:
<div class="gamebox">
<div id="bet-and-chance-texts">
<p id="bettext">BET</p>
<p id="profittext"><i class="fa fa-btc" aria-hidden="true"></i> PROFIT</p>
</div>
<div id="bet-and-chance-input-boxes">
<input class="default" id="userbet" onkeyup="checkBet()" value="0.00000000" placeholder="BTC" name="bet" autocomplete="off">
<div id="x2">x2</div>
<input readonly class="default" id="profitinput" onkeyup="" value="100" placeholder="BTC" name="bet" autocomplete="off">
</div>
<br>
<div class="line-separator"></div>
<div id="button-texts">
<p id="roll">ROLL UNDER</p>
<p id="payout">PAYOUT</p>
<p id="chance">CHANCE</p>
</div>
<div id="buttons">
<input class="hidden-boxed-input-roll" value = "50.00"/>
<input autocomplete="off" id="newpayout" onkeyup="calculateChance()" class="hidden-boxed-input" value = "2.000"/>
<input autocomplete="off" id="newchance" onkeyup="checkChance()" class="hidden-boxed-input" value = "50"/>
</div>
<br>
<div id="rolldice-section">
<button type="button" id="dicebutton" onclick="prepareRoll(authToken);" style="vertical-align:middle"><i class="fa fa-gamepad"></i> Roll dice</button>
</div>
</div>
And here is the CSS code:
.gamebox {
height: auto;
padding: 20px;
width: 60%;
font-family: Helvetica Neue;
color: black;
margin-top: 20px;
margin-left: 20px;
background-color: white;
}
.line-separator{
height:.5px;
background: lightgray;
border-bottom:.5px solid lightgray;
}
#x2{
width: 40px;
height: 40px;
background: cornflowerblue;
float: left;
}
input[class="default"]{
padding: 12px 20px;
margin : 0 auto;
box-sizing: border-box;
text-align: center;
background-color: #E4ECF1;
display: inline-block;
}
p[id="roll"]{
display: inline-block;
float: left;
font-size: 13px;
}
p[id="payout"]{
display: inline-block;
margin-right: 25px;
font-size: 13px;
}
p[id="chance"]{
display: inline-block;
float: right;
font-size: 13px;
}
div[id=button-texts]{
text-align: center;
}
I'm having trouble understanding why everything below the thin gray line is impacted. Any suggestions on how to resolve this issue?