I am having a main div \[code\]PricingBar\[/code\] inside that i have 3 sub div's . while keeping \[code\]PricingBar\[/code\] \[code\]height: auto;\[/code\] sub div's are displaying out of the \[code\]PricingBar\[/code\]
Here Green color border is \[code\]PricingBar\[/code\] Option A, Option B, Option C are sub div'shtml code: \[code\]<div id="PriceBar"> <div id="OptionA"> <h2>Option A</h2> <table class="optiontable"> <tr><td class="column1">Setup Fee: </td><td><span>$250.00</span> (includes 10 customized apparel pieces)</td></tr> <tr><td class="column1">Monthly Fee:</td><td><span>$25.00</span></td></tr> </table> </div> <div id="OptionB"> <h2>Option B</h2> <table class="optiontable"> <tr><td class="column1">Setup Fee:</td><td><span>$99.00</span> (includes 10 customized apparel pieces)</td></tr> <tr><td class="column1">Monthly Fee:</td><td><span>$40.00</span></td></tr> </table> </div> <div id="OptionC"> <h2>Option C</h2> <table class="optiontable"> <tr><td class="column1">Setup Fee:</td><td>Refund</td></tr> <tr><td class="column1">Monthly Fee:</td><td>Refunded</td></tr> </table> </div></div>\[/code\]css code:\[code\]#PriceBar{ width: 1004px; position: relative; height:auto; padding:10px; border: 2px solid green; background:#930; float: inherit;}#OptionA, #OptionB, #OptionC{ margin: 10px 20px; padding: 5px; float: left; width: 283px; height: auto; background-color: #FFF; -webkit-border-radius:15px; -mox-border-radius:15px; border-radius:15px;}#OptionA h2, #OptionB h2, #OptionC h2{ text-align: center; font-size: 18px; font-weight: bold; color: #006A8E;}table.optiontable tr td{ padding: 10px 5px; color: #B9B196;}td.column1{ width:100px; vertical-align: top; font-size: 12px; font-weight: bold; font-family: Verdana, Geneva, sans-serif; color: #252525 !important;}table.optiontable tr td span{ font-weight: bold;}\[/code\]