I want to put the balance in the upper right-hand corner of the website but for some reason I cannot get the p tag next to the h1 tag. I am very new to HTML and CSS. Any help is appreciated. I have tried to add display inline for the h1 tag and float right for the p tag as suggested by another post I saw. I also have tried setting the p tag to inline block.
body {
text-align: center;
font-family: sans-serif;
}
.cards {
height: 175px;
width: 125px;
margin: 1px;
}
.hitButton {
width: 100px;
height: 50px;
font-size: 20px;
}
.resetButton {
width: 125px;
height: 50px;
font-size: 20px;
}
.standButton {
width: 100px;
height: 50px;
font-size: 20px;
}
.slidecontainer{
text-align: center;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>first js website</title>
<link rel = "stylesheet" href="style.css">
<script src="app.js"></script>
</head>
<body>
<div>
<h1 display="inline"> Dealer:<span id="dealer-sum"></span> </h1>
<p display="inline-block">Balance: <span id="balanceAmt">50</span>$ </p>
</div>
<div id="your-cards"> </div>
<h1 class="center">Player:<span id="player-sum"></span></h1>
<div class="slidecontainer">
<p>You will bet: <span id="betAmt">0</span>$. Next round</p>
<input type="range" min="0" max="100" value="0" class="slider" id="betSlider" oninput="updateSlider()">
</div>
<div>
<br>
<button class="hitButton" id="hitId" onclick="hit()">Hit</button>
<button class="standButton" id="stanId" onclick="stand()">Stand</button>
<button class="resetButton" id="resetId" onclick="resetGame()">Deal Cards</button>
</div>
<h1 id="result"></h1>
</body>
</html>You can align two block elements by using flexbox. Assign to your div which wrapped the h1 and p tag a class like for example .line.
.line {
display: flex;
align-items: center;
justify-content: center;
gap:20px;
}
in you html
<body>
<div class="line"> <!-- <<<<< add this class -->
<h1> Dealer:<span id="dealer-sum"></span> </h1>
<p>Balance: <span id="balanceAmt">50</span>$ </p>
</div>
Small note to your code:
you use this in your tags: display="inline". that has no effects. if you want inline styling then you have write: style="display:inline;".
body {
text-align: center;
font-family: sans-serif;
}
.cards {
height: 175px;
width: 125px;
margin: 1px;
}
.hitButton {
width: 100px;
height: 50px;
font-size: 20px;
}
.resetButton {
width: 125px;
height: 50px;
font-size: 20px;
}
.standButton {
width: 100px;
height: 50px;
font-size: 20px;
}
.slidecontainer{
text-align: center;
}
.line {
display: flex;
align-items: center;
justify-content: center;
gap:20px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>first js website</title>
<link rel = "stylesheet" href="style.css">
<script src="app.js"></script>
</head>
<body>
<div class="line">
<h1> Dealer:<span id="dealer-sum"></span> </h1>
<p>Balance: <span id="balanceAmt">50</span>$ </p>
</div>
<div id="your-cards"> </div>
<h1 class="center">Player:<span id="player-sum"></span></h1>
<div class="slidecontainer">
<p>You will bet: <span id="betAmt">0</span>$. Next round</p>
<input type="range" min="0" max="100" value="0" class="slider" id="betSlider" oninput="updateSlider()">
</div>
<div>
<br>
<button class="hitButton" id="hitId" onclick="hit()">Hit</button>
<button class="standButton" id="stanId" onclick="stand()">Stand</button>
<button class="resetButton" id="resetId" onclick="resetGame()">Deal Cards</button>
</div>
<h1 id="result"></h1>
</body>
</html><h1 display="inline"> won't work as expected, there is no display atrribute in HTML. Instead you can use CSS in a stylesheet, or use the style attribute like this: <h1 style="display:inline;">
...and similar for other inline styling.