css - 排列不重叠的div

Question

我的表单中有三个 div。一个主 div 和两个子 div(一个用于左侧元素，另一个用于右侧元素)。我已经设置好了一切。但是当窗口调整大小时，左右两个 div 相互重叠。请建议我任何真正的方法来做到这一点..

查看代码

<div id="first" style="width: 100%;">
 <div class="divmain">
  <div class="divleft">
                <label class="label">
                    Invoice No.</label><span class="mand">*</span>
  </div>
  <div class="divright">
                @Html.TextBoxFor(model => model.No, new { @class = "txtbox" })
                @Html.ValidationMessageFor(model => model.No)
  </div>
 </div>
</div> 

CSS 代码

.divmain
{
padding: 15px;
width: auto;
position: relative;
height: auto !important;

}

.divmain .divleft
{

position: absolute;
top: 0;
left: 1%;
bottom: 0;
height: auto;

}

.divmain .divright
{
position: absolute;
top: 0;
bottom: 0;
left: 16%;
}

link for the demo

即使窗口调整大小时，div 也不应该相互重叠，并且应该像窗口最大化时一样。

Answer 1

参见 DEMO !

.divmain
{
padding: 15px;
width: auto;
position: relative;
height: auto !important;
background:#CCCCCC;
}

.divmain .divleft
{
float:left;
width:auto;
top: 0;
left: 1%;
bottom: 0;
height: auto;
display:block;
background:#CCCFFF;
}

.divmain .divright
{
float:left;
width:auto;
top: 0;
bottom: 0;
left: 16%;
display:block; 
background:#CCFFFF;
}