Let's take a look at the concept I am working on:
https://i.sstatic.net/RyQAB.png
I'm aiming to extract the statistics element within the red outline. The spacing issue between the stats and balance panels perplexes me. To align these panels to the left of my `.gamebox` element, I utilize `display:inline-block;`.
CSS for the panels:
/* Balance box */
.balance{
height: 10%;
margin: 20px;
width: 30%;
font-family: "smooth";
background-color: white;
color: black;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display:inline-block;
position: fixed;
}
/* Stats box */
.stats{
height: auto;
margin: 20px;
width: 30%;
font-family: "smooth";
background-color: white;
color: black;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display:inline-block;
}
CSS for the game panel:
/* Game box */
.gamebox{
height: auto;
margin: 20px;
padding: 20px;
width: 50%;
font-family: "smooth";
background-color: white;
color: black;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display:inline-block;
}
HTML:
<div class="gamebox">
<h1><i class="fa fa-btc" aria-hidden="true"></i>Bitcoin dice game</h1>
<div class="error" id="error">You have no remaining bitcoins. Why not make a deposit?</div>
<form id="index">
Bet
<br>
<span>
<input id="userbet" onkeyup="checkBet()" value="100" type="text" name="bet" autocomplete="off">
<span id="beterror" class="errortext">Invalid bet amount.</span>
<span id="x2" class="timestwo" onclick="doubleBet()">x2</span>
<span id="/2" class="dividetwo" onclick="divideBet()">/2</span>
</span>
<br>
<span>
Chance<br>
<input id ="userchance" onkeyup="checkChance()" value="50" type="text" name="chance" autocomplete="off">
<span id="chanceerror" class="errortext">Invalid chance value.</span>
</span>
<br>
<h3 id="payout">Profit: Loading...</h3>
<script>var username = <?php echo json_encode($_SESSION['username']); ?>;</script>
<script>var hash = <?php echo json_encode($_SESSION['hash']); ?>;</script>
<button type="button" id="dicebutton" onclick="prepareRoll(username, hash);" style="vertical-align:middle"><i class="fa fa-gamepad" aria-hidden="true"></i> Roll dice</button>
</form>
<button type="button" id="autobet" onclick="setAutoBet(true)"><i class="fa fa-rocket" aria-hidden="true"></i> Autobet</button>
<div class="autobet-mode" id="autobet-mode">
<h3 id="auto-bet-start-text">Set your auto bet settings, then click 'Start rolling'!".</h3>
<button type="button" id="start-autobet" onclick="startAutoBet()">Start rolling!</button>
</div>
</div>
<div class="balance">
<h3 id="balance">Balance: Loading...</h3>
</div>
<div class="stats">
<p>Stats</p>
<p>Profit: 0BTC</p>
<p>Wagered: 0BTC</p>
<p>Wins: 0</p>
<p>Losses: 0</p>
</div>