Div alignment is not working

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

enter image description here

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; }

I assume you want the divs in question to be wholly contained in the red bar? — Tieson T.
– Tieson T., Commented Jul 18, 2012 at 7:21
It is because you have a floating element inside the PriceBar div. — yudayyy
– yudayyy, Commented Jul 18, 2012 at 7:24

Tieson T. · Accepted Answer · 2012-07-18 07:23:57Z

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.

Jane · Accepted Answer · 2012-07-18 07:22:21Z

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;/*!!!*/ }

Michael Peterson · Accepted Answer · 2012-07-18 07:25:28Z

1

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

answered Jul 18, 2012 at 7:25

Michael Peterson

1,1236 silver badges15 bronze badges

Comments

Satinder singh · Accepted Answer · 2012-07-18 07:25:59Z

1

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

answered Jul 18, 2012 at 7:25

Satinder singh

10.2k18 gold badges64 silver badges102 bronze badges

Comments

EricG · Accepted Answer · 2012-07-18 07:30:49Z

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>&#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> </td> <td 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> </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>

Doc Roms · Accepted Answer · 2012-07-18 07:36:40Z

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

-1. My question is about the main div , and also I cant keep min-height because my each <tr> (sometimes its lessthan 40px).

Collectives™ on Stack Overflow

Div alignment is not working

6 Answers 6

Comments

Comments

Comments

Comments

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

2 Comments

Related