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>&#36;250.00</span> (includes 10 customized apparel pieces)</td></tr>
         <tr><td class="column1">Monthly Fee:</td><td><span>&#36;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>&#36;99.00</span> (includes 10 customized apparel pieces)</td></tr>
        <tr><td class="column1">Monthly Fee:</td><td><span>&#36;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.