Div alignment is not working - html

Question

I am having a main div PricingBar inside that i have 3 sub div's . while keeping PricingBar height: auto; sub div's are displaying out of the PricingBar
Here Green color border is PricingBar
Option A, Option B, Option C are sub div's
html 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>
css 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;
}

Answer 1

Since all your div elements float, the "red bar" basically "forgets" that it is the container for them. Simply add an overflow:auto; to make it remember. I also tend to add zoom:1 for IE.

Answer 2

because of float of sub div's
add overflow:hidden to PricingBar
#PriceBar{
width: 1004px;
position: relative;
height:auto;
padding:10px;
border: 2px solid green;
background:#930;
float: inherit;
overflow:hidden;/*!!!*/
}

Answer 3

Add overflow:hidden to your #PriceBar style should do the trick.

Answer 4

Demo
http://jsfiddle.net/8aduV/1/

Answer 5

You don't need the height:auto;
Just make it a table, as it would be crossbrowser:
<table id="PriceBar">
<tr>
<td 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>
</td>
<td 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>
</td>
<td 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>
</td>
</tr>
</table>
​

Answer 6

It's Normal, If you have an height in auto; in your two first block your block is in two lines, in the third, text it's just in one block, try whith "min-height" in every "tr"
tr{
min-height:40px;
}
Or, other solution is to create a global table, for all your code. your three colums was link, and you don't have this problem :p
For debuging, Use Firebug it's more easy for testing your html code and CSS.
I hope I help you ;-P