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

演示链接

即使调整窗口大小时，div 也不应该相互重叠，并且应该在窗口最大化时保持不变。

Answer 1

看演示！

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