html - 定位 div 以占据宽度的 50%

Question

Here is my attempt as producing my work in a Fiddle.

这是我的代码。

HTML

<div id="updatepanel">
    <div id="accountpanel">BLAH BLAH BLAH BLAH BLAH BLAH</div>
    <div id="billingpanel">
         <h2>Billing Info</h2>
        <fieldset>
            <label>Name:</label>            
            <label>Surname:</label>
            <label>Address:</label>
            <label>Phone:</label>
        </fieldset>
    </div>
    <div id="shippingpanel">
        <h2>Shipping Info</h2>
        <fieldset>
            <label>Name:</label>            
            <label>Surname:</label>
            <label>Address:</label>
            <label>Phone:</label>
        </fieldset>
    </div>
</div>

这是我的问题。我有一个购物网站，这是试图重现结帐页面。我在 CMS 中使用购物模块，我的代码是由 CMS 动态创建的。我对此的访问权限有限，但我可以修改 CSS。

现在我想要的是并排对齐“计费和运输”面板，这样可以减少页面长度，并且最终用户无需进行太多滚动操作。我尝试在包装器(更新面板)上使用“float:left”，但这并没有帮助。

Answer 1

请参阅Updated Fiddle here

CSS:

label{
    display:block;
}
#billingpanel{
    width:50%;
    float: left;    
}
#shippingpanel{
    width:50%;
    float: right;
}