Table not aligning within my div and wider than I set it

Question

I am trying to get the mortgage calculator on the right side of the website to fit in the box (div) that is supposed to be around it. You can see that it is overlapping.

Webpage: http://www.yourwhiteknight.com/properties/

As you can see from the code below, the width of the table is set in the table attribute (width="") and in CSS code but it is not obeying these rules. How can I force this table to be smaller?

Code:

<div class="textwidget">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>

<!-- Javascript function is here but no reference to width -->


<form id="mortgageCalculator">

<table border="0" cellpadding="1" style="background-color: #f4f5ed; width:248px" width="248">
    <tbody><tr style="background-color: #496b1f; font-size:11px;">
        <td colspan="2" align="CENTER">
        <b><font color="white">Mortgage Calculator</font></b>
        </td>
    </tr>
    <tr>
        <td colspan="2"> 

            <table border="0" cellpadding="1">
                <tbody><tr>
                    <td colspan="2"><b>Mortgage Data:</b>
                    </td>
                </tr><tr>
                    <td align="RIGHT">House Price ($):
                    </td>
                    <td>


    <input type="TEXT" name="price" value="50000" size="8" onchange="UpdatePrincipal(this.form)" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQV

Q4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">
                    </td>
                </tr>
                <tr>
                    <td align="RIGHT">Down Pymt ($):</td>
                    <td>
                         <input type="TEXT" name="down" value="0" size="8" onchange="UpdatePrincipal(this.form)">
                    </td>
                </tr>
                <tr>
                    <td align="right">Principal ($):</td>
                    <td>
                        <input type="text" name="principal" value="50000" size="8" readonly="true" style="background-color: #aaaaaa;">
                    </td>
                </tr>
                <tr>
                    <td align="RIGHT">Annual Int. Rate (%):</td>
                    <td>
                        <input type="TEXT" name="interest" value="8.5" size="5">
                    </td>
                </tr>
                <tr>
                    <td align="RIGHT">Term (Months):</td>
                    <td>
                        <input type="TEXT" name="term" value="120" size="5">
                    </td>
                </tr>
                <tr>
                    <td align="RIGHT">Monthly Pymt:</td>
                    <td>
                        <input type="TEXT" name="monthlyPayment" size="5">
                    </td>
                </tr><tr>
                <td align="RIGHT">Balloon Pymt:</td>
                    <td>
                        <input type="TEXT" name="balloon" size="5">
                    </td>
                </tr>
            </tbody></table>
        </td>
    </tr>
    <tr>
        <td align="CENTER" colspan="2">
            <input type="BUTTON" name="cmdCalc" value="Calculate" onclick="calculate(this.form)">
        </td>
    </tr>
</tbody></table>

</form></div>

Answer 1

the problem is within the table, with the inputs there. You can add a " width: 100%;" to the inputs and the problem is solved.

You can add the css like this:

#mortgageCalculator input {
   width: 100%;
}

Answer 2

The table will only get as small as the content within it. Your text inputs in the calculator are large enough that they're limiting how small the table is. Set a smaller width on those inputs, and it should be all good!