676d3a4d6fae34888f383c4d66a4ab99676d3a4d6fae34888f383c4d66a4ab99

<!DOCTYPE html>
<!-- grocery.html
     A document for computeCost.js
     -->
<html lang = "en">
  <head> 
    <title>grocery.html</title>
    <meta charset = "utf-8" />
    <style type = "text/css">
      label,input {display: block; margin-bottom: 20px; margin-right: 20px;} 
      label { float: left; width:200px; text-align: right;}
      input { margin-left:150px;}


      #items{ margin-bottom: 20px; margin-right: 20px;} 
      #theCost{margin-bottom: 20px; margin-right: 20px; }
      #done { margin-bottom: 20px; margin-right: 20px;} 
      #done input {display:inline; margin-left: 140px;}  
      #column { display:inline; }   
      #item, #quantity {  margin-left: 40px;}   
     </style>

<!-- Script s -->
    <script type = "text/javascript"  src = "computeCost.js" >
    </script>

  </head>

      <body>
        <h2>Grocery List</h2>
            <form>

                <div id = "column">

                    <label id="item">Item</label>
                    <label id= "quantity">Quantity</label>

                </div>

                <div id= "items">
                    <label>Apple(59 cents each) </label>
                    <input type="text" name="apples" id="appleTotal" />
                    <label>Orange(49 cents each) </label> 
                    <input type="text" name="oranges" id="orangeTotal" />

                    <label>Banana(39 cents each) </label> 
                    <input type="text" name="bananas" id="bananaTotal" />
                </div>



                <div id = "done">

                    <!-- The submit and reset buttons -->
                        <input type = "button"  value = "Submit" onClick ="ComputeCost()"/> 
                        <input type = "reset"  value = "Clear" />

                </div>

                <div id = "taxes">

                    <label>Total before tax </label> 
                    <input type="text" name="beforeTax" id="beforeTaxTotal" onfocus = "this.blur()"/>

                    <label>Tax(7.25%) </label> 
                    <input type="text" name="taxes" id="TaxTotal" disabled ="disabled" />
                </div>

                <div id = "theCost">
                    <!-- Button for precomputation of the total cost -->
                    <label >Total after tax</label>
                    <input type ="text" size = "5" id = "totalCost" onfocus = "this.blur()" />
                </div>



            </form>
      </body>
</html>

You've given your labels a width of 200px which is pushing everything over to the right.
You should get used to using the developer tools in your browser (if you don't already) as copying your code and looking at the element in the inspector I used Chrome) made this trivial to see.
And sometimes tables have a use over divs. This looks like a tabular layout to me and placing it in a table does make a certain sense.

This will work:

    <!DOCTYPE html>
    <!-- grocery.html
    A document for computeCost.js
    -->
    <html lang = "en">
    <head>
    <title>grocery.html</title>
    <meta charset = "utf-8" />
    <style type = "text/css">
    .row{
      width: 100%;
      display: block;
      height: 60px;
    }
    .col{
      float: left;
      min-width: 180px;
      display: block;
    }
    #done input[type="button"]{
      float: left;
      margin-right: 10px;
    }
    /*label,input {
      display: block; 
      margin-bottom: 20px; 
      margin-right: 20px;
      }
    label { 
      float: left; 
      width:200px; 
      text-align: right;
      }
    input { 
      margin-left:150px;
    }
    #items{ 
      margin-bottom: 20px; 
      margin-right: 20px;
    }
    #theCost{
      margin-bottom: 20px; 
      margin-right: 20px; 
    }
    #done { 
      margin-bottom: 20px; 
      margin-right: 20px;
    }
    #done input.submit, #done input.reset {
      display:inline; 
      margin-left: 10px;
      float: left;
    }
    #column { 
      display:inline;
      height: 60px; 
    }
    #item, #quantity { 
      margin-left: 40px;
    } */
    </style>
    <!-- Script s -->
    <script type = "text/javascript" src = "computeCost.js" >
    </script>
    </head>
    <body>
    <h2>Grocery List</h2>
    <form>
    <div class="row" id="column">
      <div class="col">
        <label id="item">Item</label>
      </div>
      <div class="col">
        <label id= "quantity">Quantity</label>
      </div>
    </div>
    <div class="row" id= "items">
      <div class="col">
        <label>Apple(59 cents each) </label>
      </div>
      <div class="col">
        <input type="text" name="apples" id="appleTotal" />
      </div>
    </div>
    <div class="row" id= "items">
      <div class="col">
        <label>Orange(49 cents each) </label>
      </div>
      <div class="col">
        <input type="text" name="oranges" id="orangeTotal" />
      </div>
    </div>
    <div class="row" id= "items">
      <div class="col">
        <label>Banana(39 cents each) </label>
      </div>
      <div class="col">
        <input type="text" name="bananas" id="bananaTotal" />
      </div>
    </div>
    <div class="row" id = "done">
    <!-- The submit and reset buttons -->
      <div class="col">
      &nbsp;
      </div>
      <div class="col">
        <input type = "button" value = "Submit" onClick ="ComputeCost()"/>
        <input type = "reset" value = "Clear" />
      </div>
    </div>
    <div class="row" id = "taxes">
      <div class="col">
        <label>Total before tax </label>
      </div>
      <div class="col">
        <input type="text" name="beforeTax" id="beforeTaxTotal" onfocus = "this.blur()"/>
      </div>
    </div>
    <div class="row" id = "taxes">
      <div class="col">
        <label>Tax(7.25%) </label>
      </div>
      <div class="col">
        <input type="text" name="taxes" id="TaxTotal" disabled ="disabled" />
      </div>
    </div>
    <div class="row" id = "theCost">
    <!-- Button for precomputation of the total cost -->
      <div class="col">
        <label >Total after tax</label>
      </div>
      <div class="col">
        <input type ="text" size = "5" id = "totalCost" onfocus = "this.blur()" />
      </div>
    </div>
    </form>
    </body>
    </html>

You should try to use some grid system like Skel or even better a solid framework like Bootstrap or YAML.

Cheers

Another problem with forms is that they can look very different depending upon which browser you're using. I've used things Fomralizer in the past to force the same look and feel for all browsers.
http://formalize.me/

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.