When my tables get loaded with data, the left tables take up the entire screen and the right tables get smooshed

Question

So, I've been having this rather frustrating problem, and having failed so many times, I'm hoping someone here can help me. What happens is these tables on the left side of the page appear fine and do what they're supposed to do when I compile. However, once I load it on my company's intranet and load data that way (same data btw), the tables on the left of the page explode across the the screen beyond the resolution of my work laptop (1600x900) while the tables on the right get shrunken to about 1/4th their size.

So, please help, this has been frustrating me for hours. Below you'll find the page's .aspx and the style sheet. I'll only post the top two panels of tables.

ShippingReference.aspx

<table style="width: 1000px;">
        <tr style="height: 800px;">
            <td style="width: 50%; height: 100%;" valign="top">
                <asp:Panel runat="server" ID="pnlMainInfo" style="margin:20px; background-color:#ccccff" GroupingText="Main Information:">
                    <table style="width:100%; height:100%;">

                        <tr align="center">
                            <td style="width: 25%;">
                                <div class="TBox" style="width: 90%; height: 100%;">
                                    <div class="header"> <h2>Terms:</h2> </div>
                                    <asp:TextBox ID="txtTerms" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
                                </div>
                            </td>
                        </tr>

                        <tr align="center">
                            <td style="width: 25%;">
                                <div class="TBox" style="width: 90%; height: 100%;">
                                    <div class="header"> <h2>Acceptable Carriers:</h2> </div>
                                    <asp:TextBox ID="txtCarriers" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
                                </div>
                            </td>
                        </tr>

                        <tr align="center">
                            <td style="width: 25%;">
                                <div class="TBox" style="width: 90%; height: 100%;">
                                    <div class="header"> <h2>Routing/Order Submit Time Line:</h2> </div>
                                    <asp:TextBox ID="txtTimeLine" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
                                </div>
                            </td>
                        </tr>

                        <tr align="center">
                            <td style="width: 25%;">
                                <div class="TBox" style="width: 90%; height: 100%;">
                                    <div class="header"> <h2>Appointment Information Required:</h2> </div>
                                    <asp:TextBox ID="txtAppointmentInformation" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
                                </div>
                            </td>
                        </tr>

                        <tr align="center">
                             <td style="width: 25%;">
                                 <div class="TBox" style="width: 90%; height: 100%;">
                                    <div class="header"> <h2>Carton Markings Required:</h2> </div>
                                    <asp:TextBox ID="txtCartonMarkings" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
                                </div>
                            </td>
                        </tr>

                        <tr align="center">
                            <td style="width: 25%;">
                                <div class="TBox" style="width: 90%; height: 100%;">
                                    <div class="header"> <h2>Special Labels Required:</h2> </div>
                                    <asp:TextBox ID="txtSpecialLabels" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
                                </div>
                            </td>
                        </tr>

                         <tr align="center">
                            <td style="width: 25%;">
                                 <div class="TBox" style="width: 90%; height: 100%;">
                                    <div class="header"> <h2>Shipping Contacts:</h2> </div>
                                    <asp:TextBox ID="txtShippingContacts" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
                                </div>
                            </td>
                        </tr>

                        <tr align="center">
                            <td style="width: 25%;">
                                <div class="TBox" style="width: 90%; height: 100%;">
                                    <div class="header"> <h2>Routing Website:</h2> </div>
                                    <asp:TextBox ID="txtRoutingWebsite" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
                                </div>
                            </td>
                        </tr>

                        <tr align="center">
                            <td style="width: 25%;">
                                <div class="TBox" style="width: 90%; height: 100%;">
                                    <div class="header"> <h2>Customer Website Instructions/Trouble Shooting:</h2> </div>
                                    <asp:TextBox ID="txtCustWebsite" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
                                </div>
                            </td>
                        </tr>

                    </table>
                </asp:Panel>

                <cc1:CollapsiblePanelExtender ID="pnlMainInfo_CollapsiblePanelExtender" 
                    runat="server" Enabled="True" TargetControlID="pnlMainInfo">
                </cc1:CollapsiblePanelExtender>
            </td>

            <td style="width: 50%; height: 100%;" valign="top">
                <asp:Panel runat="server" ID="pnlEDI"  style="text-align:center; margin:20px; background-color:#ccccff" GroupingText="EDI:">
                    <table style="width:100%; height:100%;">

                        <tr align="center">
                            <td style="width: 25%;">
                                <div class="TBox" style="width: 90%; height: 100%;">
                                    <div class="header"> <h2>Contact for Missed Pickup by Carrier:</h2> </div>
                                    <asp:TextBox ID="txtMissedPickupContact" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
                                </div>
                            </td>
                        </tr>

                        <tr align="center">
                            <td style="width: 25%;">
                                <div class="TBox" style="width: 90%; height: 100%;">
                                    <div class="header"> <h2>Plant EDI Documents Required:</h2> </div>
                                    <asp:TextBox ID="txtPlantEDI" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
                                </div>
                            </td>
                        </tr>

                        <tr align="center">
                            <td style="width: 25%;">
                                <div class="TBox" style="width: 90%; height: 100%;">
                                    <div class="header"> <h2>DI EDI Documents Required:</h2> </div>
                                    <asp:TextBox ID="txtDirectImportEDI" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
                                </div>
                            </td>
                        </tr>

                         <tr align="center">
                            <td style="width: 25%;">
                                <div class="TBox" style="width: 90%; height: 100%;">
                                    <div class="header"> <h2>Import/Direct Import ISF Requirements:</h2> </div>
                                    <asp:TextBox ID="txtISFRequirements" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
                                </div>
                            </td>
                        </tr>

                        <tr align="center">
                            <td style="width: 25%;">
                                 <div class="TBox" style="width: 90%; height: 100%;">
                                    <div class="header"> <h2>Import/Direct Import Customer Broker/Notify Party:</h2> </div>
                                    <asp:TextBox ID="txtCustomerBroker" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
                                </div>
                            </td>
                        </tr>

                        <tr align="center">
                            <td style="width: 25%;">
                                <div class="TBox" style="width: 90%; height: 100%;">
                                    <div class="header"> <h2>Other Shipping Documents Required:</h2> </div>
                                    <asp:TextBox ID="txtOtherShippingDocuments" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
                                </div>
                            </td>
                        </tr>

                    </table>    
                </asp:Panel>
            </td>
        </tr>

Style Sheet:

body { text-align:center; }

.lblErrorMessage    { font-family: Tahoma; font-size: 9pt; color: red; }

.TBox {
    color:#333333;
    font-size:11px;

    background: url('../../Images/box_bottom_right.gif') no-repeat bottom right;
    margin: 0;
    padding:0;
    font-family:Verdana, Arial, Helvetica, sans-serif;
}

.TBox .header {
    margin: 0;
    padding: 0;
    background: url('../../Images/box_top_right.png') no-repeat top right;
    text-align: center;
}

.TBox .header h2 {
    color:#ffffff;

    background: url('../../Images/box_top_left.png') no-repeat top left;
    font-size:14px;
    padding-top: 7px;
    height:20px;
    margin: 0;
}

.TBox .text {

    background: url('../../Images/box_bottom_left.gif') no-repeat bottom left;
    padding:10px 10px 15px 10px;    
    margin:0;
    height:auto;
    text-align:justify;
    color:#003399;
    line-height:15px;
}

Answer 1

Try to first clean the page up a bit, then it should be easier to "debug":

• Place all the styling in your stylesheet, especially the repeated width-attributes.
• Remove the unnecessary/redundant tags, i.e. the styling defined with <div class="header"> should just be set on the <h2> tag

I realize this is not the answer you're looking for, but it should defininately help you figure out the problem. Or at least make your sample code easier to read - for everybody else. :)

Answer 2

Ahhh.... Change tables to DIVs...