Buttons in different rows have different sizes

Question

I'm developing (creating a copy of iPhone calculator) a basic calculator using html, css and javascript. I have laid out buttons in different rows. But the problem is buttons in different rows have different sizes as you can see from the screenshot. The top and bottom rows buttons are perfectly round, whereas the buttons in middle rows are squished a little from the side. From the DevTool, I can see that top row buttons are exactly 64x64 as I have coded, but the middle row buttons are 59.86x64! I can't figure out how to solve this. I have tried changing size units of both container and buttons, but to no avail. For your reference, I have attached the html and css code.

Calculator screenshot

body {
  font-family: "Roboto", sans-serif;
}

header {
  background-color: #4caf50;
  color: white;
  padding: 10px 0;
  text-align: center;
}
main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #ededea;
}

.calculator {
  background-color: rgb(41, 43, 46);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0.6rem;
  padding-bottom: 0.5rem;
  border: #fff 0.1rem solid;
  position: relative;
  box-shadow: 5px -5px 7px -3px #8e8e8e;
}

.display {
  border-radius: 0.3rem;
  margin-top: 0.3rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 4rem;
  color: #f3f3f3;
}

.calc-btn {
  margin-top: 1rem;
  height: 72%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.calc-items-width {
  width: 97%;
}

.row {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.3rem 0 0.3rem;
}

button {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #696868;
  font-size: 1.5rem;
  font-weight: 700;
  color: #f3f3f3;
  text-align: center;
}

button:active {
  background-color: #e4e5e4;
}

.light-font {
  font-weight: 100;
}

.operator-size {
  font-size: 1.8rem;
}

.light-btn-color {
  background-color: #9e9e9e;
}

.orange-btn {
  background-color: #ff9800;
}

<body>
    <header>
        <h1>Simple Calculator</h1>
    </header>
    <main>
        <section class="calculator">
            <div class="display calc-items-width">0</div>
            <div class="calc-btn calc-items-width">
                <div class="row calc-items-width">
                    <button type="button" class="light-btn-color">AC</button>
                    <button type="button" class="light-font orange-btn operator-size">÷</button>    
                </div>
                <div class="row calc-items-width">
                    <button type="button">7</button>
                    <button type="button">8</button>
                    <button type="button">9</button>
                    <button type="button" class="light-font orange-btn operator-size">x</button>
                </div>
                <div class="row calc-items-width">
                    <button type="button">4</button>
                    <button type="button">5</button>
                    <button type="button">6</button>
                    <button type="button" class="light-font orange-btn operator-size">-</button>
                </div>
                <div class="row calc-items-width">
                    <button type="button">1</button>
                    <button type="button">2</button>
                    <button type="button">3</button>
                    <button type="button" class="light-font orange-btn operator-size">+</button>
                </div>
                <div class="row calc-items-width">
                    <button type="button">0</button>
                    <button type="button" class="light-font orange-btn operator-size">=</button>
                </div>
            </div>
        </section>
    </main>


    <script src="scripts/app.js"></script>
</body>

Why not simply use CSS-Grid?

tacoshy
– tacoshy

2025-06-26 16:52:31 +00:00
Commented Jun 26 at 16:52 — tacoshy
– tacoshy, Commented Jun 26 at 16:52
I am not supposed to.

Mahadi Hasan Sumon
– Mahadi Hasan Sumon

2025-06-26 17:43:45 +00:00
Commented Jun 26 at 17:43 — Mahadi Hasan Sumon
– Mahadi Hasan Sumon, Commented Jun 26 at 17:43

bruno · Accepted Answer · 2025-06-26 16:49:41Z

1

in the css if I replace your

.calc-items-width {
  width: 97%;
}

by

.calc-items-width {
  width: 100%;
}

the problem disappears, and the buttons are aligned :

edited Jun 26 at 16:49

answered Jun 26 at 16:44

bruno

34.3k8 gold badges31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mahadi Hasan Sumon Jun 26 at 17:05

I feel ashamed of skipping such a basic solution. Thank you so much.

bruno Jun 26 at 17:08

ha ha, who never did that kind of error ? ... not me ;-)

Ray Wallace · Accepted Answer · 2025-06-26 16:57:01Z

Change calc-items-width to be 100% width and have a margin. Setting width to 97% does not leave room for the buttons to be a full 64px wide.

See my EDIT comments in the stack snippet for the changes.

body {
  font-family: "Roboto", sans-serif;
}

header {
  background-color: #4caf50;
  color: white;
  padding: 10px 0;
  text-align: center;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #ededea;
}

.calculator {
  background-color: rgb(41, 43, 46);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0.6rem;
  padding-bottom: 0.5rem;
  border: #fff 0.1rem solid;
  position: relative;
  box-shadow: 5px -5px 7px -3px #8e8e8e;
}

.display {
  border-radius: 0.3rem;
  margin-top: 0.3rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 4rem;
  color: #f3f3f3;
}

.calc-btn {
  margin-top: 1rem;
  height: 72%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.calc-items-width {
  /* EDIT This width does not leave room for the buttons to be a full 64px wide */
  /* width: 97%; */
  width: 100%;

  /* EDIT Use margin instead of width */
  margin: 0 8px;
}

.row {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.3rem 0 0.3rem;
}

button {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #696868;
  font-size: 1.5rem;
  font-weight: 700;
  color: #f3f3f3;
  text-align: center;
}

button:active {
  background-color: #e4e5e4;
}

.light-font {
  font-weight: 100;
}

.operator-size {
  font-size: 1.8rem;
}

.light-btn-color {
  background-color: #9e9e9e;
}

.orange-btn {
  background-color: #ff9800;
}

<header>
  <h1>Simple Calculator</h1>
</header>
<main>
  <section class="calculator">
    <div class="display calc-items-width">0</div>
    <div class="calc-btn calc-items-width">
      <div class="row calc-items-width">
        <button type="button" class="light-btn-color">AC</button>
        <button type="button" class="light-font orange-btn operator-size">÷</button>
      </div>
      <div class="row calc-items-width">
        <button type="button">7</button>
        <button type="button">8</button>
        <button type="button">9</button>
        <button type="button" class="light-font orange-btn operator-size">x</button>
      </div>
      <div class="row calc-items-width">
        <button type="button">4</button>
        <button type="button">5</button>
        <button type="button">6</button>
        <button type="button" class="light-font orange-btn operator-size">-</button>
      </div>
      <div class="row calc-items-width">
        <button type="button">1</button>
        <button type="button">2</button>
        <button type="button">3</button>
        <button type="button" class="light-font orange-btn operator-size">+</button>
      </div>
      <div class="row calc-items-width">
        <button type="button">0</button>
        <button type="button" class="light-font orange-btn operator-size">=</button>
      </div>
    </div>
  </section>
</main>

tacoshy · Accepted Answer · 2025-06-26 17:13:23Z

A cacluator is a table-like layout and as such CSS-Grid would be more appropriate. It setss that table-like layout by default. You also don't need to set heights of the buttons hardcoded but can handle it with the size of the grid and giving the buttons aspect-ratio: 1. That way they will be round by default, not matter how large the grid is. This will make it overall more responsive.

You also don't need tio set margisn or apddings to move the elements apart but simply could use gap as you dont have sub-contaienr like with flexbox.

body {
  font-family: "Roboto", sans-serif;
}

header {
  background-color: #4caf50;
  color: white;
  padding: 10px 0;
  text-align: center;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #ededea;
}

.calculator {
  background-color: rgb(41, 43, 46);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0.6rem;
  padding-bottom: 0.5rem;
  border: #fff 0.1rem solid;
  position: relative;
  box-shadow: 5px -5px 7px -3px #8e8e8e;
}

.display {
  margin-top: 0.3rem;
  margin-bottom: 1rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 4rem;
  color: #f3f3f3;
  grid-column: 1 / -1;
}

.calc-btn {
  height: 72%;
  display: grid;
  grid-template-columns: repeat(4, 4rem);
  gap: 0.5rem;
  padding: 0.3rem;
  .span-2 {
    grid-column: span 2;
  }
}


button {
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #696868;
  font-size: 1.5rem;
  font-weight: 700;
  color: #f3f3f3;
  text-align: center;
  &.orange-btn {
    background-color: #ff9800;
  }
  &.light-btn-color {
    background-color: #9e9e9e;
  }
  &:active {
    background-color: #e4e5e4;
  }
}

.light-font {
  font-weight: 100;
}

.operator-size {
  font-size: 1.8rem;
}

<body>
  <header>
    <h1>Simple Calculator</h1>
  </header>
  <main>
    <section class="calculator">     
      <div class="calc-btn calc-items-width">
        <output class="display calc-items-width">0</output>
        
        <div class="span-2"></div>
        <button type="button" class="light-btn-color">AC</button>
        <button type="button" class="light-font orange-btn operator-size">÷</button>

        <button type="button">7</button>
        <button type="button">8</button>
        <button type="button">9</button>
        <button type="button" class="light-font orange-btn operator-size">x</button>

        <button type="button">4</button>
        <button type="button">5</button>
        <button type="button">6</button>
        <button type="button" class="light-font orange-btn operator-size">-</button>

        <button type="button">1</button>
        <button type="button">2</button>
        <button type="button">3</button>
        <button type="button" class="light-font orange-btn operator-size">+</button>

        <button type="button">0</button>
        <div class="span-2"></div>
        <button type="button" class="light-font orange-btn operator-size">=</button>
      </div>
    </section>
  </main>


  <script src="scripts/app.js"></script>
</body>

PS: I changed the position of the 0 as calculator alyouts are standarized

Thank you so much for your valuable feedback. I know CSS Grid is more appropriate in this, but I am not supposed to use grid, but just flex box as this is an assignment project.

Collectives™ on Stack Overflow

Buttons in different rows have different sizes

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related