2

I made a calculator with HTML, CSS and JavaScript. In the calculator (div) element, I am trying to add a box-shadow, but it doesn't show up properly. Only a part of the shadow appears. Image: Box-Shadow doesn't appear properly

* { 
 margin: none;
 font-size: 100%;
 font-family: courier new; 
} 
*:focus {
 outline: none;
}
#calculator {
 box-shadow: 0 1px 3px 4px rgba(0, 0, 0, 0.2);
}
#output { 
 height: 30%; 
 width: 100%; 
 font-size: 150%; 
 text-align: right; 
 color: black; 
 background-color: white;
 border: none;
} 
button { 
 background-color: black; 
 color: white; 
 width: 25%; 
 height: 50px; 
 float: left; 
 border: none; 
} 
<div id="calculator"> 
 <input id="output" disabled> 
 <div> 
  <button onclick="Write('(')">(</button> 
  <button onclick="Write(')')">)</button> 
  <button onclick="Write(' mod ')">mod</button> 
  <button style="background-color: gray" onclick="Clear()">C</button> 
  <br> 
  <button onclick="Write(7)">7</button> 
  <button onclick="Write(8)">8</button> 
  <button onclick="Write(9)">9</button> 
  <button onclick="Write(' / ')">/</button> 
  <br> 
  <button onclick="Write(4)">4</button> 
  <button onclick="Write(5)">5</button> 
  <button onclick="Write(6)">6</button> 
  <button onclick="Write(' * ')">*</button> 
  <br> 
  <button onclick="Write(1)">1</button> 
  <button onclick="Write(2)">2</button> 
  <button onclick="Write(3)">3</button> 
  <button onclick="Write(' - ')">-</button> 
  <br> 
  <button onclick="Write(0)">0</button> 
  <button onclick="Write('.')">.</button> 
  <button style="background-color:rgb(70, 70, 250)" onclick="calculate()">=</button> 
  <button onclick="Write(' + ')">+</button> 
  </div> 
</div>

Could anyone tell me what's wrong in this code? And also, could anyone tell me how to change syntax highlight language here in Stack Overflow?

Joseph Sible-Reinstate Monica
  • 45,431
  • 5
  • 48
  • 98

1 Answers1

1

you had float: left; on your button styling, that was what was causing problems with the height of your container not adjusting. I've swapped it out for a display: flex and a flex-wrap and increased the opacity of your box-shadow for demonstrative purposes. 

* { 
 margin: none;
 font-size: 100%;
 font-family: courier new; 
} 
*:focus {
 outline: none;
}
#calculator {
 box-shadow: 0 1px 3px 4px rgba(0, 0, 0, 0.8);
}

#content {
  display: flex; 
  flex-wrap: wrap;
  }

#output { 
 height: 30%; 
 width: 100%; 
 font-size: 150%; 
 text-align: right; 
 color: black; 
 background-color: white;
 border: none;
} 
button { 
 background-color: black; 
 color: white; 
 width: 25%; 
 height: 50px; 
 border: none; 
} 
<div id="calculator"> 
 <input id="output" disabled> 
 <div id = "content"> 
    <button onclick="Write('(')">(</button> 
    <button onclick="Write(')')">)</button> 
    <button onclick="Write(' mod ')">mod</button> 
    <button style="background-color: gray" onclick="Clear()">C</button> 
    <br> 
    <button onclick="Write(7)">7</button> 
    <button onclick="Write(8)">8</button> 
    <button onclick="Write(9)">9</button> 
    <button onclick="Write(' / ')">/</button> 
    <br> 
    <button onclick="Write(4)">4</button> 
    <button onclick="Write(5)">5</button> 
    <button onclick="Write(6)">6</button> 
    <button onclick="Write(' * ')">*</button> 
    <br> 
    <button onclick="Write(1)">1</button> 
    <button onclick="Write(2)">2</button> 
    <button onclick="Write(3)">3</button> 
    <button onclick="Write(' - ')">-</button> 
    <br> 
    <button onclick="Write(0)">0</button> 
    <button onclick="Write('.')">.</button> 
    <button style="background-color:rgb(70, 70, 250)" onclick="calculate()">=</button> 
    <button onclick="Write(' + ')">+</button> 
  </div> 
</div>
Diego
  • 187
  • 4