| SitePoint Sponsor |
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
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.
Alternatively just set a min-width on the whole thing and people will have to scroll (not usually a good idea).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" /> <img src="images/search.jpg" /> </td> <td width="23%" class="value">(-) <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" /> <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"> </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>
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
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%; 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">£</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" /> <img src="images/search.jpg" /> </td> <td width="23%" class="value">(-) <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" /> <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"> </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>
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
Posting Permissions
Bookmarks