IE alignment issue

Question

I have a div that aligns well on Chrome but not Internet Explorer. As I cannot embed images here is a link to what happens. https://www.dropbox.com/s/ymzt6y3zwm6mylf/ie%20gc.png

The CSS for the element is

  .calculator-submodule {
    float: left;
    text-align: center;
    padding-bottom: 10px;
    padding-right: 25px;
    font-size: 20px;
    font-weight: 300; 
  }

  .calculator-submodule #total {
    padding-top: 42px;
  }

  .calculator-total {
    display: inline-block;
    padding-left:20px;
    padding-top: 40px;
  }

And HTML

<div class="calculator">
   <div class="calculator-submodule input-group">
   <h4>Adult (12+)</h4>
   <button class="btn theme-btn" id="decrease" value="Decrease Value" >-</button>
   <input type="text" id="adult" value="1" class="form-control input-usmall" min="0"  disabled>
   <button class="btn theme-btn" id="increase" value="Increase Value" >+</button>
   </div>
   <div class="calculator-submodule input-group">
   <h4>Child (2-11)</h4>
   <button class="btn theme-btn" id="decreasec" value="Decrease Value" >-</button>
   <input type="text" id="child" value="0" class="form-control input-usmall"  min="0" disabled>
   <button class="btn theme-btn" id="increasec" value="Increase Value" >+</button>
</div>

 <div class="calculator-submodule">
     <div id="total">
     <span class="pound">£</span>
     <span id="total">39</span><span class="pound">.00</span>
     </div>
 </div>

Answer 1

For using IE8 and under you can make an IE only stylesheet. And use:

display: inline;

Instead of:

display: inline-block;