some problems in html and css codes

Question

I'm trying to code a Calculator interface I'm facing two problems : 1) why these buttons' (.,+) dimensions are not accurate 2) why this code :

.button {
  background-color: rgb(81, 122, 121);
  border: 7px solid rgb(213, 236, 213);
  color: white;
  padding: 10px 45px;
  font-size: 25px;
}

.button20 {
  background-color: rgb(36, 117, 117);
  padding: 15px 32px;
  text-align: right;
  width: 285px;
  height: 45px;
}

.button19 {
  padding: 10px 20px;
}

.style {
  margin: 0 auto;
}

<div class="button button20">0</div>
<div>
  <button class="button">7</button>
  <button class="button">8</button>
  <button class="button">9</button>

</div>

<div>
  <button class="button">4</button>
  <button class="button">5</button>
  <button class="button">6</button>

</div>
<div>
  <button class="button">1</button>
  <button class="button">2</button>
  <button class="button">3</button>

</div>
<div>
  <button class="button">0</button>
  <button class="button button12">.</button>
  <button class="button">±</button>

</div>
<div>
  <button class="button button14">×</button>
  <button class="button">+</button>
  <button class="button button16">-</button>

</div>
<div>
  <button class="button">÷</button>
  <button class="button">=</button>
  <button class=" button button19">Clear</button>

</div>

</div>

CSS codes: .button { background-color: rgb(81, 122, 121); border: 7px solid rgb(213, 236, 213); color : white; padding: 10px 45px; font-size: 25px; } .button20 { background-color: rgb(36, 117, 117); padding: 15px 32px; text-align: right; width: 285px; height: 45px; } .button19 { padding: 10px 20px; } .style { margin: 0 auto; } — Jawaad
– Jawaad, Commented Mar 11, 2020 at 2:50
<link rel="stylesheet" type="text/css" href="calculator interface.css"> — Jawaad
– Jawaad, Commented Mar 11, 2020 at 3:11

thingEvery · Accepted Answer · 2020-03-11 04:07:27Z

Try wrapping the whole thing in a div with display: flex; and removing all the other divs.

Then add extra styling for .button20 so it takes up the whole row.

.calculator {
  width: 285px;
  display: flex;
  flex-wrap: wrap;
}

button {
  background-color: rgb(81, 122, 121);
  border: 7px solid rgb(213, 236, 213);
  color: white;
  padding: 10px;
  font-size: 25px;
  flex: 1 0 33.3%;
}

.button20 {
  background-color: rgb(36, 117, 117);
  text-align: right;
  flex: 0 0 100%;
}

<div class="calculator">
  <button class="button20">0</button>

  <button>7</button>
  <button>8</button>
  <button>9</button>

  <button>4</button>
  <button>5</button>
  <button>6</button>

  <button>1</button>
  <button>2</button>
  <button>3</button>

  <button>0</button>
  <button>.</button>
  <button>±</button>

  <button>×</button>
  <button>+</button>
  <button>-</button>

  <button>÷</button>
  <button>=</button>
  <button>Clear</button>

</div>

Rajeev · Accepted Answer · 2020-03-11 04:04:01Z

You can fix this by changing your CSS. I have edited your code. This is work as you expect.

.button {
  background-color: rgb(81, 122, 121);
  border: 7px solid rgb(213, 236, 213);
  color: white;
  padding: 10px 45px;
  font-size: 25px;
width: 117px !important;
}

.button20 {
  background-color: rgb(36, 117, 117);
  padding: 15px 32px;
  text-align: right;
  width: 281px !important;
  height: 45px;
}

.button19 {
  padding: 10px 20px;
}

.style {
  margin: 0 auto;
}

<div class="button button20">0</div>
<div>
  <button class="button">7</button>
  <button class="button">8</button>
  <button class="button">9</button>

</div>

<div>
  <button class="button">4</button>
  <button class="button">5</button>
  <button class="button">6</button>

</div>
<div>
  <button class="button">1</button>
  <button class="button">2</button>
  <button class="button">3</button>

</div>
<div>
  <button class="button">0</button>
  <button class="button button12">.</button>
  <button class="button">±</button>

</div>
<div>
  <button class="button button14">×</button>
  <button class="button">+</button>
  <button class="button button16">-</button>

</div>
<div>
  <button class="button">÷</button>
  <button class="button">=</button>
  <button class=" button button19">Clear</button>

</div>

</div>

Jawaad · Accepted Answer · 2020-03-17 13:05:39Z

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Calculater interface</title>

.button, .result { background-color: rgb(81, 122, 121); border: 6px solid rgb(213, 236, 213); color: white; font-size: 25px; padding: 5px; }

    .result {
        background-color: rgb(36, 117, 117);
        width: 286px;
    }

    .button {
        width: 100px;
        height: 50px;
    }
</style>



<div class="wrapper">

    <div class="result">0</div>

    <div>

        <button class="button">7</button>

        <button class="button">8</button>

        <button class="button">9</button>

    </div>



    <div>

        <button class="button">4</button>

        <button class="button">5</button>

        <button class="button">6</button>

    </div>

    <div>

        <button class="button">1</button>

        <button class="button">2</button>

        <button class="button">3</button>

    </div>

    <div>

        <button class="button">0</button>

        <button class="button">.</button>

        <button class="button">±</button>

    </div>

    <div>

        <button class="button">×</button>

        <button class="button">+</button>

        <button class="button">-</button>

    </div>

    <div>

        <button class="button">÷</button>

        <button class="button">=</button>

        <button class=" button">Clear</button>

    </div>

</div>

</div>

Collectives™ on Stack Overflow

some problems in html and css codes

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related