I need help positioning some buttons

HTML-CSS
1

So I’m making a calculator and I want to make the “Subtract” and “Exponentiate” buttons down by 5 pixles. My current code is

<!DOCTYPE html>
<html>
<head>
<meta charset="ascii">
<title>Calculator</title>
</head>

<body>
<h2 style="font-family:verdana">Calculator</h2>
<input id="1" type="text">
<p style="font-family:verdana">by</p>
<input id="2" type="text">
<br>
<br>
<button type="button" 
onclick="document.getElementById('demo').textContent = Number(document.getElementById(1).value) + Number(document.getElementById(2).value)">Add</button>
<button type="button" 
onclick="document.getElementById('demo').textContent = Number(document.getElementById(1).value) * Number(document.getElementById(2).value)">Multiply</button>
<button type="button" 
onclick="document.getElementById('demo').textContent = Number(document.getElementById(1).value) / Number(document.getElementById(2).value)">Devide</button>

! Right here is the space !

<button type="button" 
onclick="document.getElementById('demo').textContent = Number(document.getElementById(1).value) - Number(document.getElementById(2).value)">Subtract</button>
<button type="button" 
onclick="document.getElementById('demo').textContent = Number(document.getElementById(1).value) ** Number(document.getElementById(2).value)">Exponentiate</button>
<p style="font-family:verdana" id="demo">0</p>
</body>
</html>

Can you help me with that?

2

Hello,
Can you please explain more what you mean by down 5px because when I run this code, I see both button on the same line with the other buttons and the text, do you mean you want them on a new line down by 5px, down by 5px of their current position ?

3

Wait no‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌
Lets say you have a bag of oranges (in 2d) what’s the best way to put them together?

4

Sorry, I did not understand what you were trying to say

5

I want it to look like this:

Add Multiply Devide
Subtract Exponentiate

6

5 pixel gap between layers

7

You should learn HTML and CSS. Luckily there is a free curriculum for this: https://www.freecodecamp.org/learn/2022/responsive-web-design/

8

There are a lot of ways to approach this, a simple one will be to add a line break element after the text ! Right here is the space ! and before the button Subtract then on the subtract button add a margin top of 5px
Here you can read about this here:

: The Line Break element - HTML: HyperText Markup Language | MDN (mozilla.org)
margin-top - CSS: Cascading Style Sheets | MDN (mozilla.org)

9

I’m confused so just put the code here and ill put it in the

<!DOCTYPE html>
<html>
<head>
<meta charset="ascii">
<title>Calculator</title>
</head>

<body>
<h2 style="font-family:verdana">Calculator</h2>
<input id="1" type="text">
<p style="font-family:verdana">by</p>
<input id="2" type="text">
<br>
<br>
<button type="button" 
onclick="document.getElementById('demo').textContent = Number(document.getElementById(1).value) + Number(document.getElementById(2).value)">Add</button>
<button type="button" 
onclick="document.getElementById('demo').textContent = Number(document.getElementById(1).value) * Number(document.getElementById(2).value)">Multiply</button>
<button type="button" 
onclick="document.getElementById('demo').textContent = Number(document.getElementById(1).value) / Number(document.getElementById(2).value)">Divide</button>



<button type="button" 
onclick="document.getElementById('demo').textContent = Number(document.getElementById(1).value) - Number(document.getElementById(2).value)">Subtract</button>
<button type="button" 
onclick="document.getElementById('demo').textContent = Number(document.getElementById(1).value) ** Number(document.getElementById(2).value)">Exponentiate</button>
<p style="font-family:verdana" id="demo">0</p>
</body>
</html>

– removed

10

We don’t write code for people here. We help people who are trying to learn how to code.

5 Likes
11

Ok. I’ll try to figure it out.

12

Please don’t link your website

13

Please don’t post off topic nonsense when people are trying to help you. I think you’ve had enough warnings now.