« Back to Index

CSS representation of long hand division

View original Gist on GitHub

CSS representation of long hand division.html

<style>
.divisor {
  border-right: 1px black solid; 
  border-radius: 0px 0px 10px 0px;
  padding-right: 5px;
}
.dividend {
  border-top: 1px black solid; 
  padding-left: 3px;
  position: relative;
}
.answer {
  position: absolute;
  top: -1.5em;
}
</style>

<span class='divisor'>8</span><span class='dividend'><span class='answer'>9(r3)</span>75</span>
<br><br>
<span class='divisor'>8</span><span class='dividend'><span class='answer'>1(r1)</span>9</span>
<br><br>
<span class='divisor'>8</span><span class='dividend'><span class='answer'>0(r1)</span>1</span>