Get floating div to vertical align
Here's the challenge I'm facing.  I'm trying to get a div to appear behind another object and to center align to it.

This is what I'm up to so far:  http://jsfiddle.net/imoda/GYha2/

And this is the result I'm trying to get

![enter image description here][1]

As you can see, I'm close.  I just can't get it to align center and to position itself behind the other object.

Any thoughts?

HTML:

    <div id="banner" class="grid_12">
    
        <div class="bannerBgT"></div>
        
            <div class="bannerBgY">
            
                <div id="planPricingWrapper">
                
                    <div id="planPrices">
                    
                        <div class="planPrice">
                                           
                            <div class="planPriceX">
                            
                            </div>
                            
                            <div class="planPriceR"></div>
                            
                            <div class="clear"></div>
                        
                        </div>
                        
                        <div class="clear_10px"></div>
                    
                        <div class="planPrice">
                                           
                            <div class="planPriceX">
                            
                            </div>
                            
                            <div class="planPriceR"></div>
                            
                            <div class="clear"></div>
                        
                        </div>
                    
                    </div>
                    
                    <div id="planPriceOptions">
            
                        <div class="planPriceOptionsBgT" id="supremacy"></div>
                
                        <div class="planPriceOptionsBgY" id="supremacy">
                        
                            <div><img src="http://www.patientacquisitionsystem.com/images/plans/pricing_title_supremacy.png" width="183" height="27" alt="Supremacy" id="titleImg" /></div>
                            
                            <img src="http://www.patientacquisitionsystem.com/images/plans/pricing_plan_supremacy.png" width="146" height="156" alt="" />
                            
                            <div class="planFeatures">
                            
                                <b>Includes Gold &amp; Platinum Features Plus:</b>
                                
                                <ul>
                                
                                    <li>Class 3 Rayhawk Design</li>
                                    
                                    <li>Class 3 Content Management</li>
                                    
                                    <li>Up to 6 Content Modules</li>
                                    
                                    <li>Inclusion in 2 or more directories/portals</li>
                                    
                                    <li>Access to Rayhawk brand management services*</li>
                                    
                                    <li>Mobile device enabled educational content/videos</li>
                                    
                                    <li>Marketing materials deployment system*^</li>
                                    
                                    <li>2 hours per month of additional services</li>
                                
                                </ul>
                            
                            </div>
                        
                        </div>
                    
                        <div class="planPriceOptionsBgB" id="supremacy"></div>
                    
                    </div>
                    
                </div>
                
                <div class="clear"></div>
                
            </div>
            
        <div class="bannerBgB"></div>
        
    </div>

CSS:

    #planPricingWrapper {
        padding: 20px;
    }
    
    #planPrices {
        float: right;
    }
    
    #planPrices * {
        z-index: 1;
    }
    
    .planPrice > * {
        float: left;
    }
    
    .planPriceX {
        width: 280px;
        height: 131px;
        background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_bg_x.png) repeat-x;
    }
     
    .planPriceR {
        width: 11px;
        height: 131px;
        background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_bg_r.png) no-repeat;
    }
    
    #planPriceOptions {
        z-index: 9999999;
    }
    
    .planPriceOptionsBgT, .planPriceOptionsBgB {
        width: 614px;
    }
     
    .planPriceOptionsBgT#supremacy, .planPriceOptionsBgY#supremacy, .planPriceOptionsBgB#supremacy {
        background-color: #181818;
    }
     
    .planPriceOptionsBgT {
        height: 10px;
        background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_plan_bg_t.png) no-repeat;
    }
     
    .planPriceOptionsBgY {
        background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_plan_bg_y.png) repeat-y;
        color: #FFF;
        text-align: center;
        padding: 20px;
        width: 574px;
        min-height: 250px;
    }
     
    .planPriceOptionsBgY #titleImg {
        margin-bottom: 10px;
    }
     
    .planPriceOptionsBgB {
        height: 12px;
        background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_plan_bg_b.png) no-repeat;
    }
    
    .planFeatures {
        display: inline-block;
        vertical-align: top;
        font-size: 14px;
        text-align: left;
        list-style: square;
        margin-left: 10px;
    }
    
    .planFeatures ul {
        list-style: square;
    }


  [1]: http://i.stack.imgur.com/KKKID.pngAny
Get floating div to vertical align
===

Here's the challenge I'm facing.  I'm trying to get a div to appear behind another object and to center align to it.

This is what I'm up to so far:  http://jsfiddle.net/imoda/GYha2/

And this is the result I'm trying to get

![enter image description here][1]

As you can see, I'm close.  I just can't get it to align center and to position itself behind the other object.

Any thoughts?

HTML:

    <div id="banner" class="grid_12">
    
        <div class="bannerBgT"></div>
        
            <div class="bannerBgY">
            
                <div id="planPricingWrapper">
                
                    <div id="planPrices">
                    
                        <div class="planPrice">
                                           
                            <div class="planPriceX">
                            
                            </div>
                            
                            <div class="planPriceR"></div>
                            
                            <div class="clear"></div>
                        
                        </div>
                        
                        <div class="clear_10px"></div>
                    
                        <div class="planPrice">
                                           
                            <div class="planPriceX">
                            
                            </div>
                            
                            <div class="planPriceR"></div>
                            
                            <div class="clear"></div>
                        
                        </div>
                    
                    </div>
                    
                    <div id="planPriceOptions">
            
                        <div class="planPriceOptionsBgT" id="supremacy"></div>
                
                        <div class="planPriceOptionsBgY" id="supremacy">
                        
                            <div><img src="http://www.patientacquisitionsystem.com/images/plans/pricing_title_supremacy.png" width="183" height="27" alt="Supremacy" id="titleImg" /></div>
                            
                            <img src="http://www.patientacquisitionsystem.com/images/plans/pricing_plan_supremacy.png" width="146" height="156" alt="" />
                            
                            <div class="planFeatures">
                            
                                <b>Includes Gold &amp; Platinum Features Plus:</b>
                                
                                <ul>
                                
                                    <li>Class 3 Rayhawk Design</li>
                                    
                                    <li>Class 3 Content Management</li>
                                    
                                    <li>Up to 6 Content Modules</li>
                                    
                                    <li>Inclusion in 2 or more directories/portals</li>
                                    
                                    <li>Access to Rayhawk brand management services*</li>
                                    
                                    <li>Mobile device enabled educational content/videos</li>
                                    
                                    <li>Marketing materials deployment system*^</li>
                                    
                                    <li>2 hours per month of additional services</li>
                                
                                </ul>
                            
                            </div>
                        
                        </div>
                    
                        <div class="planPriceOptionsBgB" id="supremacy"></div>
                    
                    </div>
                    
                </div>
                
                <div class="clear"></div>
                
            </div>
            
        <div class="bannerBgB"></div>
        
    </div>

CSS:

    #planPricingWrapper {
        padding: 20px;
    }
    
    #planPrices {
        float: right;
    }
    
    #planPrices * {
        z-index: 1;
    }
    
    .planPrice > * {
        float: left;
    }
    
    .planPriceX {
        width: 280px;
        height: 131px;
        background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_bg_x.png) repeat-x;
    }
     
    .planPriceR {
        width: 11px;
        height: 131px;
        background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_bg_r.png) no-repeat;
    }
    
    #planPriceOptions {
        z-index: 9999999;
    }
    
    .planPriceOptionsBgT, .planPriceOptionsBgB {
        width: 614px;
    }
     
    .planPriceOptionsBgT#supremacy, .planPriceOptionsBgY#supremacy, .planPriceOptionsBgB#supremacy {
        background-color: #181818;
    }
     
    .planPriceOptionsBgT {
        height: 10px;
        background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_plan_bg_t.png) no-repeat;
    }
     
    .planPriceOptionsBgY {
        background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_plan_bg_y.png) repeat-y;
        color: #FFF;
        text-align: center;
        padding: 20px;
        width: 574px;
        min-height: 250px;
    }
     
    .planPriceOptionsBgY #titleImg {
        margin-bottom: 10px;
    }
     
    .planPriceOptionsBgB {
        height: 12px;
        background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_plan_bg_b.png) no-repeat;
    }
    
    .planFeatures {
        display: inline-block;
        vertical-align: top;
        font-size: 14px;
        text-align: left;
        list-style: square;
        margin-left: 10px;
    }
    
    .planFeatures ul {
        list-style: square;
    }


  [1]: http://i.stack.imgur.com/KKKID.pngAny