My goal is to create a calculator that looks like the image attached below:
However, I'm having trouble aligning the equal button properly. How can I adjust it to match the equal button in the image?
Here's the code snippet I'm currently working with:
#container
{
text-align: center;
margin: 200px auto;
}
button
{
width: 30px;
margin: 0 auto;
}
#clear, #zero
{
width: 65px;
}
#equal
{
height: 65px;
}<div id="container">
<div id="display">
</div>
<button id="clear">CLEAR</button>
<button value="/">÷</button>
<button value="*">x</button><br><br>
<button value="7">7</button>
<button value="">8</button>
<button value="9">9</button>
<button value="-">-</button><br><br>
<button value="4">4</button>
<button value="5">5</button>
<button value="6">6</button>
<button value="+">+</button><br><br>
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button><br><br>
<button id="zero" value="0">0</button>
<button value=".">.</button>
<button id="equal" value="=">=</button>
</div>
<script type="text/javascript" src="Calculator.js"></script>
</body>
</html>