SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML Problem with screen resolution.

    Hi Friends,

    My html page works fine when the screen resolution is more than 1024 x 768.

    But when i change the screen resolution to 1024 x 768 the page got collapse. I hve attached the zip file for your reference. Please tell me where did i made mistake.

    Please help me in this issue.

    Thanks in advance
    Attached Files Attached Files

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The mistake was in making the individual elements too wide.

    You could try making the inputs fluid also to allow the page to collapse.

    e.g.

    input{width:60%!important}

    You would probably have to do it on a case by cas basis though using classes as required.

    Otherwise it looks as though the minimum width of some of those elements is about 567px. That means that if they are side by side then you need at least 1134px of space.

    There is little you can do unless you want to redesign the elements smaller and more fluid so that they can collapse more which would mean losing the tables and coming up with an alternative design.

    Perhaps the only logical thing you can do is to create two floated columns instead of multiple left and right elements and put a min-width on each column so that the 2 columns become one column when the screen is squashed and therefore will still be usable rather than overlap.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Breezemount</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <style>
    body {
        margin: 0px auto;
        padding: 0px;
    }
    .clearfix:after {
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    .clearfix {
        display:inline-block;
    }
    /* Hide from IE Mac \*/
    .clearfix {
        display:block;
    }
    /* End hide from IE Mac */
        
    #wrapper {
        width: 100%;
        margin: 0px auto;
    }
    #header {
        width: 100%;
        margin: 0px auto;
        padding: 0px;
    }
    #bookingcontainer {
        width: 95%;
        margin: 0 auto;
        padding-top: 20px;
    }
    #booking {
        width: 100%;
        margin: 0 auto;
        line-height: 25px;
        font-family: Arial;
        font-size: 16px;
        color: #3d7fd3;
        font-weight: bold;
        border: 1px solid #3177a5;
        text-align: center;
    }
    
    .leftcolumn,.rightcolumn{
        width:49%;
        float:left;
        margin:0 .9% 0 0;
        min-width:567px; 
    }
    .rightcolumn{margin:0;}
    #orderdetails {
        width: 100%;
        padding-top: 19px;
    }
    .heading {
        background: #c0d8f0;
        font-family: Arial;
        font-size: 14px;
        font-weight: bold;
        color: #3d7fd3;
        padding: 0px;
        margin: 0px;
        line-height: 22px;
        border-bottom: 2px solid #3d7fd3;
        padding-left: 8px;
    }
    .list {
        font-family: Arial;
        font-size: 12px;
        color: #000000;
        margin: 0px;
        padding: 0px;
        vertical-align: middle;
        text-align: left;
    }
    .value {
        font-family: Arial;
        font-size: 12px;
        color: #000000;
        margin: 0px;
        padding: 0px;
        vertical-align: top;
    }
    input, select {
        font-family: Arial;
        font-size: 12px;
        color: #000000;
    }
    #customerdetails {
        width: 100%;
        padding-top: 19px;
    }
    #totalcost {
        width: 100%;
        padding-top: 19px;
    }
    .pound {
        font-family: Arial;
        font-size: 12px;
        color: #000000;
        text-align: right;
    }
    .totalheading {
        font-family: Arial;
        font-size: 18px;
        color: #000000;
        font-weight: bold;
        line-height: 50px;
        text-align: center;
        border-bottom: 2px solid #3d7fd3;
    }
    .seperator {
        border: 2px solid #3d7fd3;
        border-top: none;
    }
    .total {
        font-family: Arial;
        font-size: 12px;
        color: #000000;
        font-weight: bold;
        line-height: 30px;
    }
    .tpound {
        font-family: Arial;
        font-size: 22px;
        font-weight: bold;
        color: #3177a5;
    }
    #ttlinp input {
        font-family: Arial;
        font-size: 24px;
        font-weight: bold;
        color: #3177a5;
    }
    #purchasearticles {
        width: 100%;
        padding-top: 19px;
    }
    .headingbg {
        background: #e8f0fb;
        font-family: Arial;
        font-size: 14px;
        font-weight: bold;
        color: #000000;
        padding: 0px;
        margin: 0px;
        line-height: 22px;
        text-align: center
    }
    .items {
        font-family: Arial;
        font-size: 12px;
        color: #2e75a3;
    }
    .qty, .rate {
        font-family: Arial;
        font-size: 12px;
        color: #2e75a3;
        text-align: right;
    }
    .tvalue, .tpur {
        font-family: Arial;
        font-size: 12px;
        color: #000000;
        font-weight: bold;
        line-height: 30px;
        text-align: right;
        padding-right: 8px;
    }
    #deleverynotes {
        width: 100%;
        padding-top: 19px;
    }
    #booking input {
        background: #2e77a4;
        font-family: Arial;
        font-size: 12px;
        border: none;
    }
    #border {
        margin: 0 auto;
        text-align: center;
        padding: 1px;
        border: 1px solid #2e77a4;
    }
    #submitbutton {
        width: 49%;
        float: left;
    }
    #resetbutton {
        width: 49%;
        float: right;
    }
    
    </style>
    </head>
    <body>
    <div id="wrapper">
        <div id="header"><img src="images/topbanner_new.jpg" width="100%"/></div>
        <div id="bookingcontainer" class="clearfix">
            <div id="booking">Booking</div>
            <div class="leftcolumn">
                <div id="orderdetails">
                    <table width="100%" cellspacing="0" cellpadding="0" style="border:2px solid #3d7fd3;">
                        <tr>
                            <td class="heading">Order Details</td>
                        </tr>
                        <tr valign="top">
                            <td><table id="orddts" width="100%" border="0" cellspacing="0" cellpadding="0" align="left" style="vertical-align:top;">
                                    <tr valign="top">
                                        <td><table width="100%" border="0" cellspacing="8" cellpadding="0" >
                                                <tr>
                                                    <td class="list">Booking Location</td>
                                                    <td class="value">BELFAST</td>
                                                </tr>
                                                <tr>
                                                    <td class="list">Booking Date</td>
                                                    <td class="value"><input type="text" /></td>
                                                </tr>
                                                <tr>
                                                    <td class="list">Zone</td>
                                                    <td class="value"><input type="text" /></td>
                                                </tr>
                                                <tr>
                                                    <td class="list">SAC/BO Number</td>
                                                    <td class="value"><input type="text" /></td>
                                                </tr>
                                            </table></td>
                                        <td align="right"><table width="100%" border="0" cellspacing="8" cellpadding="0" align="right">
                                                <tr align="right">
                                                    <td colspan="3"><table width="100%" border="0" cellspacing="0"cellpadding="0" align="right">
                                                            <tr align="right" valign="top">
                                                                <td class="list">Post Code</td>
                                                                <td class="value"><input type="text" size="5" /></td>
                                                                <td class="value"><input type="text" size="5" /></td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                                <tr align="right">
                                                    <td class="list">Booking Type</td>
                                                    <td class="value"><select style="width:93%">
                                                            <option value="volvo">Volvo</option>
                                                            <option value="saab">Saab</option>
                                                            <option value="mercedes">Mercedes</option>
                                                            <option value="audi">Audi</option>
                                                        </select></td>
                                                </tr>
                                                <tr align="right">
                                                    <td class="list">Time</td>
                                                    <td class="value"><select style="width:93%">
                                                            <option value="volvo">IST</option>
                                                            <option value="saab">PST</option>
                                                            <option value="mercedes">GMT</option>
                                                            <option value="audi">USA</option>
                                                        </select></td>
                                                </tr>
                                                <tr align="right">
                                                    <td colspan="3"><table width="100%" border="0" cellspacing="0"cellpadding="0" align="right">
                                                            <tr align="right" valign="top">
                                                                <td class="list">Date of Delivery</td>
                                                                <td class="value" align="left"><input type="text" size="10" /></td>
                                                                <td class="value" valign="middle"><img src="images/calendar.jpg" /></td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                                <tr align="right">
                                                    <td class="list">Purchase Value</td>
                                                    <td class="value"><input type="text" /></td>
                                                </tr>
                                                <tr align="right">
                                                    <td class="list">Payment Method</td>
                                                    <td class="value"><select style="width:93%">
                                                            <option value="volvo">Credit Card</option>
                                                            <option value="saab">Cheque</option>
                                                            <option value="mercedes">Cash</option>
                                                            <option value="audi">Money Order</option>
                                                        </select></td>
                                                </tr>
                                            </table></td>
                                    </tr>
                                </table></td>
                        </tr>
                    </table>
                </div>
                <!-- orderdetails ends here -->
                <div id="totalcost">
                    <table width="100%" cellspacing="0" cellpadding="0" style="border:2px solid #3d7fd3;">
                        <tr>
                            <td class="heading">Total Cost</td>
                        </tr>
                        <tr>
                            <td><table width="100%" border="0" cellspacing="8" cellpadding="0">
                                    <tr align="right">
                                        <td width="62%" class="list">Delivery Charges</td>
                                        <td width="4%" colspan="10" align="right" class="pound"></td>
                                        <td width="34%" class="value"><input type="text" /></td>
                                    </tr>
                                    <tr align="right">
                                        <td colspan="10"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="right">
                                                <tr align="right">
                                                    <td width="28%" class="list">Promotion</td>
                                                    <td width="21%" class="value" align="l"><input type="text" size="5" />
                                                        &nbsp;&nbsp;<img src="images/search.jpg" /> </td>
                                                    <td width="23%" class="value">(-)&nbsp;&nbsp;
                                                        <input type="text" size="5" /></td>
                                                    <td width="7%" align="right" class="pound"></td>
                                                    <td width="21%" class="value"><input type="text" size="10" /></td>
                                                </tr>
                                            </table></td>
                                    </tr>
                                    <tr align="right">
                                        <td width="62%" class="list">Delivery Charges After Promotion</td>
                                        <td width="4%" colspan="10" align="right" class="pound"></td>
                                        <td width="34%" class="value"><input type="text" /></td>
                                    </tr>
                                    <tr align="right">
                                        <td width="62%" class="list">Storage Charges</td>
                                        <td width="4%" colspan="10" align="right" class="pound"></td>
                                        <td width="34%" class="value"><input type="text" /></td>
                                    </tr>
                                    <tr align="right">
                                        <td width="62%" class="list">Trolley Charges</td>
                                        <td width="4%" colspan="10" align="right" class="pound"></td>
                                        <td width="34%" class="value"><input type="text" /></td>
                                    </tr>
                                    <tr align="right">
                                        <td width="62%" class="list">Picking Charges</td>
                                        <td width="4%" colspan="10" align="right" class="pound"></td>
                                        <td width="34%" class="value"><input type="text" /></td>
                                    </tr>
                                    <tr align="right">
                                        <td width="62%" class="list">Assembly Charges</td>
                                        <td width="4%" colspan="10" align="right" class="pound"></td>
                                        <td width="34%" class="value"><input type="text" /></td>
                                    </tr>
                                    <tr align="right">
                                        <td width="62%" class="list">Service Charges</td>
                                        <td width="4%" colspan="10" align="right" class="pound"></td>
                                        <td width="34%" class="value"><input type="text" /></td>
                                    </tr>
                                    <tr align="right">
                                        <td width="62%" class="list">Total Excluding CC Charges</td>
                                        <td width="4%" colspan="10" align="right" class="pound"></td>
                                        <td width="34%" class="value"><input type="text" /></td>
                                    </tr>
                                    <tr align="right">
                                        <td width="62%" class="list">Credit Card Charges</td>
                                        <td width="4%" colspan="10" align="right" class="pound"></td>
                                        <td width="34%" class="value"><input type="text" /></td>
                                    </tr>
                                </table>
                                <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-top:2px solid #3d7fd3;">
                                    <tr>
                                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td class="totalheading" >Total Paid</td>
                                                </tr>
                                                <tr>
                                                    <td><table width="100%" border="0" cellspacing="8" cellpadding="0" align="center">
                                                            <tr align="center" height="75" valign="middle">
                                                                <td class="tpound"></td>
                                                                <td id="ttlinp"><input type="text" size="8" /></td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                            </table></td>
                                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border: 2px solid #3d7fd3; border-bottom: none; border-top: none;">
                                                <tr>
                                                    <td class="totalheading" >Still To Pay</td>
                                                </tr>
                                                <tr>
                                                    <td><table width="100%" border="0" cellspacing="8" cellpadding="0" align="center">
                                                            <tr align="center" height="75" valign="middle">
                                                                <td class="tpound"></td>
                                                                <td id="ttlinp"><input type="text" size="8" /></td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                            </table></td>
                                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td class="totalheading" >Total Charges</td>
                                                </tr>
                                                <tr>
                                                    <td><table width="100%" border="0" cellspacing="8" cellpadding="0" align="center">
                                                            <tr align="center" height="75" valign="middle">
                                                                <td class="tpound"></td>
                                                                <td id="ttlinp"><input type="text" size="8" /></td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                            </table></td>
                                    </tr>
                                </table></td>
                        </tr>
                    </table>
                </div>
                <!-- totalcost ends here -->
            </div>
            <div class="rightcolumn">
                <div id="customerdetails">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0" height="216" style="border:2px solid #3d7fd3;">
                        <tr>
                            <td class="heading">Customer Details</td>
                        </tr>
                        <tr valign="top">
                            <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr valign="top">
                                        <td><table width="100%" border="0" cellspacing="8" cellpadding="0">
                                                <tr>
                                                    <td colspan="4"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                            <tr>
                                                                <td class="list">Tile</td>
                                                                <td class="value"><select>
                                                                        <option value="volvo">Mr.</option>
                                                                        <option value="saab">Miss</option>
                                                                        <option value="mercedes">Mrs.</option>
                                                                    </select></td>
                                                                <td class="list">Initial</td>
                                                                <td class="value"><input type="text" size="5" /></td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                                <tr>
                                                    <td class="list">Address</td>
                                                    <td class="value"><textarea rows=4 cols=17 name=code2></textarea></td>
                                                </tr>
                                                <tr>
                                                    <td class="list">City</td>
                                                    <td class="value"><input type="text" /></td>
                                                </tr>
                                                <tr>
                                                    <td class="list">Phone</td>
                                                    <td class="value"><input type="text" /></td>
                                                </tr>
                                            </table></td>
                                        <td><table width="100%" border="0" cellspacing="8" cellpadding="0" align="right">
                                                <tr align="right">
                                                    <td class="list">Name</td>
                                                    <td class="value"><input type="text" /></td>
                                                </tr>
                                                <tr align="right">
                                                    <td class="list">Postal Code</td>
                                                    <td class="value"><input type="text" /></td>
                                                </tr>
                                                <tr align="right">
                                                    <td class="list">Mobile Number</td>
                                                    <td class="value"><input type="text" /></td>
                                                </tr>
                                            </table></td>
                                    </tr>
                                </table></td>
                        </tr>
                    </table>
                </div>
                <!-- customerdetails ends here -->
                <div id="purchasearticles">
                    <table width="100%" cellspacing="0" cellpadding="0" style="border:2px solid #3d7fd3;">
                        <tr>
                            <td class="heading">List Of Purchase Articles</td>
                        </tr>
                        <tr valign="top">
                            <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr valign="top">
                                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-right: 2px solid #3d7fd3; border-bottom: 2px solid #3d7fd3;">
                                                <tr valign="top">
                                                    <td class="headingbg">Code</td>
                                                </tr>
                                                <tr valign="top">
                                                    <td><table width="100%" border="0" cellspacing="8" cellpadding="0" >
                                                            <tr valign="top">
                                                                <td class="items" align="center"><input type="text" size="5" />
                                                                    &nbsp;&nbsp;<img src="images/search.jpg" /></td>
                                                            </tr>
                                                            <tr valign="top">
                                                                <td class="items">123456</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">123456</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">123456</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">123456</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">123456</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">123456</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">123456</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">123456</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">123456</td>
                                                            </tr>
                                                            <tr >
                                                                <td class="items">123456</td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                            </table></td>
                                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-right: 2px solid #3d7fd3; ">
                                                <tr align="center" valign="top">
                                                    <td class="headingbg">Description</td>
                                                </tr>
                                                <tr>
                                                    <td><table width="100%" border="0" cellspacing="8" cellpadding="0">
                                                            <tr valign="top">
                                                                <td class="items" align="center"><input type="text" size="7" /></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">Goods Name</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">Goods Name</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">Goods Name</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">Goods Name</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">Goods Name</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">Goods Name</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">Goods Name</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">Goods Name</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">Goods Name</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">Goods Name</td>
                                                            </tr>
                                                        </table>
                                                        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-top: 2px solid #3d7fd3;">
                                                            <tr>
                                                                <td class="total">Total</td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                            </table></td>
                                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-right: 2px solid #3d7fd3;">
                                                <tr valign="top">
                                                    <td class="headingbg">Qty.</td>
                                                </tr>
                                                <tr>
                                                    <td><table width="100%" border="0" cellspacing="8" cellpadding="0" >
                                                            <tr>
                                                                <td class="qty" align="center"><input type="text" size="3" /></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="qty">2</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="qty">2</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="qty">2</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="qty">2</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="qty">2</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="qty">2</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="qty">2</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="qty">2</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="qty">2</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="qty">2</td>
                                                            </tr>
                                                        </table>
                                                        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-top: 2px solid #3d7fd3;">
                                                            <tr>
                                                                <td class="tvalue">20</td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                            </table></td>
                                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-right: 2px solid #3d7fd3;">
                                                <tr valign="top">
                                                    <td class="headingbg">Rate</td>
                                                </tr>
                                                <tr>
                                                    <td><table width="100%" border="0" cellspacing="8" cellpadding="0">
                                                            <tr>
                                                                <td class="qty" align="center"><input type="text" size="5" /></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">4210/-</td>
                                                            </tr>
                                                        </table>
                                                        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-top: 2px solid #3d7fd3;">
                                                            <tr>
                                                                <td class="tpur">&nbsp;</td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                            </table></td>
                                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr valign="top">
                                                    <td class="headingbg">Purchase</td>
                                                </tr>
                                                <tr>
                                                    <td><table width="100%" border="0" cellspacing="8" cellpadding="0">
                                                            <tr>
                                                                <td class="qty" align="center"><input type="text" size="5" /></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">4210/-</td>
                                                            </tr>
                                                        </table>
                                                        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-top: 2px solid #3d7fd3;">
                                                            <tr>
                                                                <td class="tpur">42100/-</td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                            </table></td>
                                    </tr>
                                </table></td>
                        </tr>
                    </table>
                </div>
                <!-- purchasearticles ends here -->
                <div id="deleverynotes">
                    <table width="100%" cellspacing="0" cellpadding="0" style="border:2px solid #3d7fd3; height:120px;">
                        <tr>
                            <td class="heading">Delivery Notes</td>
                        </tr>
                        <tr>
                            <td><table width="97%" border="0" cellspacing="8" cellpadding="0" align="center">
                                    <tr align="center">
                                        <td><textarea rows=4 style="width:100%" name=code2></textarea></td>
                                    </tr>
                                </table></td>
                        </tr>
                    </table>
                </div>
                <!-- deleverynotes ends here -->
            </div>
        </div>
        <!-- bookingcontainer ends here -->
        <div id="booking" class="clearfix" style="padding:3px; margin-top: 10px; width: 95%;">
            <div id="submitbutton">
                <div id="border" style="float:right">
                    <input type="submit" />
                </div>
            </div>
            <div id="resetbutton">
                <div id="border" style="float:left">
                    <input type="reset" />
                </div>
            </div>
        </div>
    </div>
    <!-- wrapper ends here -->
    </body>
    </html>
    Alternatively just set a min-width on the whole thing and people will have to scroll (not usually a good idea).

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Here is the version with the inputs set to a percentage width and seems to get quite a bit smaller.

    Code:
    To allow the page to collaspe smaller than it does now you could try using percentage widths for all those elements (such as the inputs) so that they get smaller also and allow the page to get to a reasonable size.
    
    Here's another rough example.
    
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Breezemount</title>
    <style>
    body {
        margin: 0px auto;
        padding: 0px;
    }
    .clearfix:after {
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    .clearfix {
        display:inline-block;
    }
    /* Hide from IE Mac \*/
    .clearfix {
        display:block;
    }
    /* End hide from IE Mac */
        
    #wrapper {
        width: 100&#37;;
        margin: 0px auto;
    }
    #header {
        width: 100%;
        margin: 0px auto;
        padding: 0px;
    }
    #bookingcontainer {
        width: 95%;
        margin: 0 auto;
        padding-top: 20px;
    }
    #booking {
        width: 100%;
        margin: 0 auto;
        line-height: 25px;
        font-family: Arial;
        font-size: 16px;
        color: #3d7fd3;
        font-weight: bold;
        border: 1px solid #3177a5;
        text-align: center;
    }
    
    .leftcolumn,.rightcolumn{
        width:49%;
        float:left;
        margin:0 .9% 0 0;
    }
    .rightcolumn{margin:0;}
    #orderdetails {
        width: 100%;
        padding-top: 19px;
    }
    .heading {
        background: #c0d8f0;
        font-family: Arial;
        font-size: 14px;
        font-weight: bold;
        color: #3d7fd3;
        padding: 0px;
        margin: 0px;
        line-height: 22px;
        border-bottom: 2px solid #3d7fd3;
        padding-left: 8px;
    }
    .list {
        font-family: Arial;
        font-size: 12px;
        color: #000000;
        margin: 0px;
        padding: 0px;
        vertical-align: middle;
        text-align: left;
    }
    .value {
        font-family: Arial;
        font-size: 12px;
        color: #000000;
        margin: 0px;
        padding: 0px;
        vertical-align: top;
    }
    input, select {
        font-family: Arial;
        font-size: 12px;
        color: #000000;
    }
    #customerdetails {
        width: 100%;
        padding-top: 19px;
    }
    #totalcost {
        width: 100%;
        padding-top: 19px;
    }
    .pound {
        font-family: Arial;
        font-size: 12px;
        color: #000000;
        text-align: right;
    }
    .totalheading {
        font-family: Arial;
        font-size: 18px;
        color: #000000;
        font-weight: bold;
        line-height: 50px;
        text-align: center;
        border-bottom: 2px solid #3d7fd3;
    }
    .seperator {
        border: 2px solid #3d7fd3;
        border-top: none;
    }
    .total {
        font-family: Arial;
        font-size: 12px;
        color: #000000;
        font-weight: bold;
        line-height: 30px;
    }
    .tpound {
        font-family: Arial;
        font-size: 22px;
        font-weight: bold;
        color: #3177a5;
    }
    #ttlinp input {
        font-family: Arial;
        font-size: 24px;
        font-weight: bold;
        color: #3177a5;
    }
    #purchasearticles {
        width: 100%;
        padding-top: 19px;
    }
    .headingbg {
        background: #e8f0fb;
        font-family: Arial;
        font-size: 14px;
        font-weight: bold;
        color: #000000;
        padding: 0px;
        margin: 0px;
        line-height: 22px;
        text-align: center
    }
    .items {
        font-family: Arial;
        font-size: 12px;
        color: #2e75a3;
    }
    .qty, .rate {
        font-family: Arial;
        font-size: 12px;
        color: #2e75a3;
        text-align: right;
    }
    .tvalue, .tpur {
        font-family: Arial;
        font-size: 12px;
        color: #000000;
        font-weight: bold;
        line-height: 30px;
        text-align: right;
        padding-right: 8px;
    }
    #deleverynotes {
        width: 100%;
        padding-top: 19px;
    }
    #booking input {
        background: #2e77a4;
        font-family: Arial;
        font-size: 12px;
        border: none;
    }
    #border {
        margin: 0 auto;
        text-align: center;
        padding: 1px;
        border: 1px solid #2e77a4;
    }
    #submitbutton {
        width: 49%;
        float: left;
    }
    #resetbutton {
        width: 49%;
        float: right;
    }
    input{width:60%!important}
    </style>
    </head>
    <body>
    <div id="wrapper">
        <div id="header"><img src="images/topbanner_new.jpg" width="100%"/></div>
        <div id="bookingcontainer" class="clearfix">
            <div id="booking">Booking</div>
            <div class="leftcolumn">
                <div id="orderdetails">
                    <table width="100%" cellspacing="0" cellpadding="0" style="border:2px solid #3d7fd3;">
                        <tr>
                            <td class="heading">Order Details</td>
                        </tr>
                        <tr valign="top">
                            <td><table id="orddts" width="100%" border="0" cellspacing="0" cellpadding="0" align="left" style="vertical-align:top;">
                                    <tr valign="top">
                                        <td><table width="100%" border="0" cellspacing="8" cellpadding="0" >
                                                <tr>
                                                    <td class="list">Booking Location</td>
                                                    <td class="value">BELFAST</td>
                                                </tr>
                                                <tr>
                                                    <td class="list">Booking Date</td>
                                                    <td class="value"><input type="text" /></td>
                                                </tr>
                                                <tr>
                                                    <td class="list">Zone</td>
                                                    <td class="value"><input type="text" /></td>
                                                </tr>
                                                <tr>
                                                    <td class="list">SAC/BO Number</td>
                                                    <td class="value"><input type="text" /></td>
                                                </tr>
                                            </table></td>
                                        <td align="right"><table width="100%" border="0" cellspacing="8" cellpadding="0" align="right">
                                                <tr align="right">
                                                    <td colspan="3"><table width="100%" border="0" cellspacing="0"cellpadding="0" align="right">
                                                            <tr align="right" valign="top">
                                                                <td class="list">Post Code</td>
                                                                <td class="value"><input type="text" size="5" /></td>
                                                                <td class="value"><input type="text" size="5" /></td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                                <tr align="right">
                                                    <td class="list">Booking Type</td>
                                                    <td class="value"><select style="width:93%">
                                                            <option value="volvo">Volvo</option>
                                                            <option value="saab">Saab</option>
                                                            <option value="mercedes">Mercedes</option>
                                                            <option value="audi">Audi</option>
                                                        </select></td>
                                                </tr>
                                                <tr align="right">
                                                    <td class="list">Time</td>
                                                    <td class="value"><select style="width:93%">
                                                            <option value="volvo">IST</option>
                                                            <option value="saab">PST</option>
                                                            <option value="mercedes">GMT</option>
                                                            <option value="audi">USA</option>
                                                        </select></td>
                                                </tr>
                                                <tr align="right">
                                                    <td colspan="3"><table width="100%" border="0" cellspacing="0"cellpadding="0" align="right">
                                                            <tr align="right" valign="top">
                                                                <td class="list">Date of Delivery</td>
                                                                <td class="value" align="left"><input type="text" size="10" /></td>
                                                                <td class="value" valign="middle"><img src="images/calendar.jpg" /></td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                                <tr align="right">
                                                    <td class="list">Purchase Value</td>
                                                    <td class="value"><input type="text" /></td>
                                                </tr>
                                                <tr align="right">
                                                    <td class="list">Payment Method</td>
                                                    <td class="value"><select style="width:93%">
                                                            <option value="volvo">Credit Card</option>
                                                            <option value="saab">Cheque</option>
                                                            <option value="mercedes">Cash</option>
                                                            <option value="audi">Money Order</option>
                                                        </select></td>
                                                </tr>
                                            </table></td>
                                    </tr>
                                </table></td>
                        </tr>
                    </table>
                </div>
                <!-- orderdetails ends here -->
                <div id="totalcost">
                    <table width="100%" cellspacing="0" cellpadding="0" style="border:2px solid #3d7fd3;">
                        <tr>
                            <td class="heading">Total Cost</td>
                        </tr>
                        <tr>
                            <td><table width="100%" border="0" cellspacing="8" cellpadding="0">
                                    <tr align="right">
                                        <td width="62%" class="list">Delivery Charges</td>
                                        <td width="4%" colspan="10" align="right" class="pound">&#163;</td>
                                        <td width="34%" class="value"><input type="text" /></td>
                                    </tr>
                                    <tr align="right">
                                        <td colspan="10"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="right">
                                                <tr align="right">
                                                    <td width="28%" class="list">Promotion</td>
                                                    <td width="21%" class="value" align="l"><input type="text" size="5" />
                                                        &nbsp;&nbsp;<img src="images/search.jpg" /> </td>
                                                    <td width="23%" class="value">(-)&nbsp;&nbsp;
                                                        <input type="text" size="5" /></td>
                                                    <td width="7%" align="right" class="pound">&#163;</td>
                                                    <td width="21%" class="value"><input type="text" size="10" /></td>
                                                </tr>
                                            </table></td>
                                    </tr>
                                    <tr align="right">
                                        <td width="62%" class="list">Delivery Charges After Promotion</td>
                                        <td width="4%" colspan="10" align="right" class="pound">&#163;</td>
                                        <td width="34%" class="value"><input type="text" /></td>
                                    </tr>
                                    <tr align="right">
                                        <td width="62%" class="list">Storage Charges</td>
                                        <td width="4%" colspan="10" align="right" class="pound">&#163;</td>
                                        <td width="34%" class="value"><input type="text" /></td>
                                    </tr>
                                    <tr align="right">
                                        <td width="62%" class="list">Trolley Charges</td>
                                        <td width="4%" colspan="10" align="right" class="pound">&#163;</td>
                                        <td width="34%" class="value"><input type="text" /></td>
                                    </tr>
                                    <tr align="right">
                                        <td width="62%" class="list">Picking Charges</td>
                                        <td width="4%" colspan="10" align="right" class="pound">&#163;</td>
                                        <td width="34%" class="value"><input type="text" /></td>
                                    </tr>
                                    <tr align="right">
                                        <td width="62%" class="list">Assembly Charges</td>
                                        <td width="4%" colspan="10" align="right" class="pound">&#163;</td>
                                        <td width="34%" class="value"><input type="text" /></td>
                                    </tr>
                                    <tr align="right">
                                        <td width="62%" class="list">Service Charges</td>
                                        <td width="4%" colspan="10" align="right" class="pound">&#163;</td>
                                        <td width="34%" class="value"><input type="text" /></td>
                                    </tr>
                                    <tr align="right">
                                        <td width="62%" class="list">Total Excluding CC Charges</td>
                                        <td width="4%" colspan="10" align="right" class="pound">&#163;</td>
                                        <td width="34%" class="value"><input type="text" /></td>
                                    </tr>
                                    <tr align="right">
                                        <td width="62%" class="list">Credit Card Charges</td>
                                        <td width="4%" colspan="10" align="right" class="pound">&#163;</td>
                                        <td width="34%" class="value"><input type="text" /></td>
                                    </tr>
                                </table>
                                <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-top:2px solid #3d7fd3;">
                                    <tr>
                                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td class="totalheading" >Total Paid</td>
                                                </tr>
                                                <tr>
                                                    <td><table width="100%" border="0" cellspacing="8" cellpadding="0" align="center">
                                                            <tr align="center" height="75" valign="middle">
                                                                <td class="tpound">&#163;</td>
                                                                <td id="ttlinp"><input type="text" size="8" /></td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                            </table></td>
                                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border: 2px solid #3d7fd3; border-bottom: none; border-top: none;">
                                                <tr>
                                                    <td class="totalheading" >Still To Pay</td>
                                                </tr>
                                                <tr>
                                                    <td><table width="100%" border="0" cellspacing="8" cellpadding="0" align="center">
                                                            <tr align="center" height="75" valign="middle">
                                                                <td class="tpound">&#163;</td>
                                                                <td id="ttlinp"><input type="text" size="8" /></td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                            </table></td>
                                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td class="totalheading" >Total Charges</td>
                                                </tr>
                                                <tr>
                                                    <td><table width="100%" border="0" cellspacing="8" cellpadding="0" align="center">
                                                            <tr align="center" height="75" valign="middle">
                                                                <td class="tpound">&#163;</td>
                                                                <td id="ttlinp"><input type="text" size="8" /></td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                            </table></td>
                                    </tr>
                                </table></td>
                        </tr>
                    </table>
                </div>
                <!-- totalcost ends here -->
            </div>
            <div class="rightcolumn">
                <div id="customerdetails">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0" height="216" style="border:2px solid #3d7fd3;">
                        <tr>
                            <td class="heading">Customer Details</td>
                        </tr>
                        <tr valign="top">
                            <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr valign="top">
                                        <td><table width="100%" border="0" cellspacing="8" cellpadding="0">
                                                <tr>
                                                    <td colspan="4"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                            <tr>
                                                                <td class="list">Tile</td>
                                                                <td class="value"><select>
                                                                        <option value="volvo">Mr.</option>
                                                                        <option value="saab">Miss</option>
                                                                        <option value="mercedes">Mrs.</option>
                                                                    </select></td>
                                                                <td class="list">Initial</td>
                                                                <td class="value"><input type="text" size="5" /></td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                                <tr>
                                                    <td class="list">Address</td>
                                                    <td class="value"><textarea rows=4 cols=17 name=code2></textarea></td>
                                                </tr>
                                                <tr>
                                                    <td class="list">City</td>
                                                    <td class="value"><input type="text" /></td>
                                                </tr>
                                                <tr>
                                                    <td class="list">Phone</td>
                                                    <td class="value"><input type="text" /></td>
                                                </tr>
                                            </table></td>
                                        <td><table width="100%" border="0" cellspacing="8" cellpadding="0" align="right">
                                                <tr align="right">
                                                    <td class="list">Name</td>
                                                    <td class="value"><input type="text" /></td>
                                                </tr>
                                                <tr align="right">
                                                    <td class="list">Postal Code</td>
                                                    <td class="value"><input type="text" /></td>
                                                </tr>
                                                <tr align="right">
                                                    <td class="list">Mobile Number</td>
                                                    <td class="value"><input type="text" /></td>
                                                </tr>
                                            </table></td>
                                    </tr>
                                </table></td>
                        </tr>
                    </table>
                </div>
                <!-- customerdetails ends here -->
                <div id="purchasearticles">
                    <table width="100%" cellspacing="0" cellpadding="0" style="border:2px solid #3d7fd3;">
                        <tr>
                            <td class="heading">List Of Purchase Articles</td>
                        </tr>
                        <tr valign="top">
                            <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr valign="top">
                                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-right: 2px solid #3d7fd3; border-bottom: 2px solid #3d7fd3;">
                                                <tr valign="top">
                                                    <td class="headingbg">Code</td>
                                                </tr>
                                                <tr valign="top">
                                                    <td><table width="100%" border="0" cellspacing="8" cellpadding="0" >
                                                            <tr valign="top">
                                                                <td class="items" align="center"><input type="text" size="5" />
                                                                    &nbsp;&nbsp;<img src="images/search.jpg" /></td>
                                                            </tr>
                                                            <tr valign="top">
                                                                <td class="items">123456</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">123456</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">123456</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">123456</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">123456</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">123456</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">123456</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">123456</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">123456</td>
                                                            </tr>
                                                            <tr >
                                                                <td class="items">123456</td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                            </table></td>
                                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-right: 2px solid #3d7fd3; ">
                                                <tr align="center" valign="top">
                                                    <td class="headingbg">Description</td>
                                                </tr>
                                                <tr>
                                                    <td><table width="100%" border="0" cellspacing="8" cellpadding="0">
                                                            <tr valign="top">
                                                                <td class="items" align="center"><input type="text" size="7" /></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">Goods Name</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">Goods Name</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">Goods Name</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">Goods Name</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">Goods Name</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">Goods Name</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">Goods Name</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">Goods Name</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">Goods Name</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="items">Goods Name</td>
                                                            </tr>
                                                        </table>
                                                        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-top: 2px solid #3d7fd3;">
                                                            <tr>
                                                                <td class="total">Total</td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                            </table></td>
                                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-right: 2px solid #3d7fd3;">
                                                <tr valign="top">
                                                    <td class="headingbg">Qty.</td>
                                                </tr>
                                                <tr>
                                                    <td><table width="100%" border="0" cellspacing="8" cellpadding="0" >
                                                            <tr>
                                                                <td class="qty" align="center"><input type="text" size="3" /></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="qty">2</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="qty">2</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="qty">2</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="qty">2</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="qty">2</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="qty">2</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="qty">2</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="qty">2</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="qty">2</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="qty">2</td>
                                                            </tr>
                                                        </table>
                                                        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-top: 2px solid #3d7fd3;">
                                                            <tr>
                                                                <td class="tvalue">20</td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                            </table></td>
                                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-right: 2px solid #3d7fd3;">
                                                <tr valign="top">
                                                    <td class="headingbg">Rate</td>
                                                </tr>
                                                <tr>
                                                    <td><table width="100%" border="0" cellspacing="8" cellpadding="0">
                                                            <tr>
                                                                <td class="qty" align="center"><input type="text" size="5" /></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">&#163;4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">&#163;4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">&#163;4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">&#163;4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">&#163;4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">&#163;4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">&#163;4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">&#163;4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">&#163;4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">&#163;4210/-</td>
                                                            </tr>
                                                        </table>
                                                        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-top: 2px solid #3d7fd3;">
                                                            <tr>
                                                                <td class="tpur">&nbsp;</td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                            </table></td>
                                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr valign="top">
                                                    <td class="headingbg">Purchase</td>
                                                </tr>
                                                <tr>
                                                    <td><table width="100%" border="0" cellspacing="8" cellpadding="0">
                                                            <tr>
                                                                <td class="qty" align="center"><input type="text" size="5" /></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">&#163;4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">&#163;4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">&#163;4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">&#163;4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">&#163;4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">&#163;4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">&#163;4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">&#163;4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">&#163;4210/-</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="rate">&#163;4210/-</td>
                                                            </tr>
                                                        </table>
                                                        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-top: 2px solid #3d7fd3;">
                                                            <tr>
                                                                <td class="tpur">&#163;42100/-</td>
                                                            </tr>
                                                        </table></td>
                                                </tr>
                                            </table></td>
                                    </tr>
                                </table></td>
                        </tr>
                    </table>
                </div>
                <!-- purchasearticles ends here -->
                <div id="deleverynotes">
                    <table width="100%" cellspacing="0" cellpadding="0" style="border:2px solid #3d7fd3; height:120px;">
                        <tr>
                            <td class="heading">Delivery Notes</td>
                        </tr>
                        <tr>
                            <td><table width="97%" border="0" cellspacing="8" cellpadding="0" align="center">
                                    <tr align="center">
                                        <td><textarea rows=4 style="width:100%" name=code2></textarea></td>
                                    </tr>
                                </table></td>
                        </tr>
                    </table>
                </div>
                <!-- deleverynotes ends here -->
            </div>
        </div>
        <!-- bookingcontainer ends here -->
        <div id="booking" class="clearfix" style="padding:3px; margin-top: 10px; width: 95%;">
            <div id="submitbutton">
                <div id="border" style="float:right">
                    <input type="submit" />
                </div>
            </div>
            <div id="resetbutton">
                <div id="border" style="float:left">
                    <input type="reset" />
                </div>
            </div>
        </div>
    </div>
    <!-- wrapper ends here -->
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •