IE8 alignment problem. Usercontrol in div wraps down. happens only in IE8, works fine in FF, chrome, IE7.

Question

Hello,

I have three usercontrols aligned side by side inside a DIV. It displays well in all browsers except for IE8, where the third usercontrol wraps down. This can be seen at:

http://dealtown.com/UserTownPage.aspx?tid=153554

Widths seem to be right everywhere and there is enough space for the usercontrol to be displayed. I am missing something here and I am not able to put my finger on it.

If you want any code, i can share!

Any help is appreciated.

Thanks.

Code:

               <div id="tab_navi_bg_inside" style="width:740px;_height:470px;overflow-x:hidden">
                <!-- Coupon Display Panel -->
                <div style=" vertical-align:top">
                <uc3:UCCoupon ID="UCCoupon1" runat="server"></uc3:UCCoupon></div>
                <!-- End of Coupon Display Panel -->
                <div class="coupone_sep">
                </div>
                <!-- Promotion Display Panel -->
                 <div style=" vertical-align:top">
                <uc4:UCTownPagePromotion ID="UCTownPagePromotion1"     runat="server"></uc4:UCTownPagePromotion>     </div>               
                <!-- End Promotion Panel End -->
                <div class="coupone_sep">
                </div>
                <!-- Weekly Promotion Display Panel -->
                 <div style=" vertical-align:top">
                <uc5:UCTownWeeklyPromotion ID="UCTownWeeklyPromotion1" runat="server" /></div>
                <!-- End Weekly Promotion Display Panel -->
        </div>

Answer 1

try putting overflow-x:hidden on the parent of those 3 containers, if possible.