Wed, 2009-01-21 11:59
Hi guys,
I am having a problem sizing a table to 100% inside a div, It wont full the entire thing i am guessing its to do with the margins or something?
please help
John
<div id="right-container1" style="width:60%;"> <div style="width:100%; background-color:#00FF00;" > <div id="section-title-yellow">Gross Benefit Amount</div> <div class="space-line"></div> <table class="contenttable" width="102%"> <th id="section-title-blue" colspan="2"><div align="left">Withholding:</div></th> <tr id="section-title-medOrange"> <td>Federal Tax</td> <td>-$0.00</td> </tr> <tr id="section-title-lightOrange"> <td>FICA - OASDI Tax</td> <td>-$0.00</td> </tr> <tr id="section-title-medOrange"> <td>FICA - OASDI Tax</td> <td>-$0.00</td> </tr> <tr id="section-title-lightOrange"> <td>Other Tax</td> <td>-$0.00</td> </tr> <tr id="section-title-medOrange"> <td>3rd Party Benefit</td> <td>-$0.00</td> </tr> </table> </div> <div class="space-line"></div> <div id="section-title-yellow">Net Benefit Amount</div> </div>
/* CSS Document */ /* Container for Claims pages */ div#claimMainContainer {margin:10px; position:relative; width:100%;} /* Container for Claims pages contained within the Tab Navigator */ div#claimTabMainContainer {margin:10px; position:relative;} .boldText{font-weight:bold;} h2{color:#003946;} /* Like a <table> tag */ #base-layer { background: none #ffffff; border: none; padding: 0; text-align: left; width: auto; } /* Like a <tr> tag */ #table-row-no-border { margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; padding: 0; text-align: left; width: auto; } /* Like a <td align='left'> tag */ #left-container1 { border: none; float: left; margin: 0; padding: 0px; } /* Like a <td align='right'> tag */ #right-container1 { border: none; float: right; margin: 0; padding: 0px; } #right-container1 p { padding: 5px 5px 5px 5px; } /* Section title with orange background */ #section-title-orange { background:none #F7df9f; font-weight:bold; border:1px solid #FFCC99; margin:0; padding:5px; width:100%; } /* Section title with yellow background */ #section-title-yellow { background:none #Eaab00; font-weight:bold; border:1px solid #FFCC99; margin:0; padding:5px; width:100%; } /* Section title with navy background */ #section-title-navy { text-align:left; padding:5px; background:none #003946; color:#FFFFFF; font-weight:bold; width:auto; border:1px solid #003946; } /* Section title with blue background */ #section-title-blue { text-align:left; padding:5px; background:none #5582ab; color:#FFFFFF; font-weight:bold; width:100%; border:1px solid #5582ab; } #section-title-lightOrange { text-align:left; padding:10px; background:none #fbecc3; color:#000000;margin:0; padding:5px; width:100%;border:1px solid #fbecc3; } #section-title-medOrange { text-align:left; padding:10px; background:none #f7df9f; color:#000000;margin:0; padding:5px; width:100%; border:1px solid #f7df9f;; } /* Spacer (like <br> */ .space-line { clear: both; margin: 0; padding: 0; width: auto; height:10px; } #glossary { color:#7cafca; font-weight:bold; cursor:hand;} .yui-tt { color: #003946; font-size:11px; border: 1px solid #F7df9f; background-color: #FFFFFF; padding: 10px; width:400px; } /* Content table with navy borders and navy header (use if css not an option for layout) */ .contenttable tr td{padding:5px;} .contenttable th{ text-align:left; color:#FFFFFF; padding:5px;}