不能避免div拉伸另一个

Question

为了布局目的从表格切换到div听起来很有吸引力，但这很痛苦。我仍然无法正确使用float和oveflow来正确对齐div。这是我有以下html和css：

HTML

<div class="div-row">
  <div id="divOfficers" class="div-column">DIVOFFICERS</div>
  <div id="divTasks">DIVTASKS</div>

CSS

.div-row {
    width:100%;
    overflow:clear;
    margin-bottom:5px;
}
.div-column {
    margin-right:3px;
    float:left;
}
#divOfficers {
    border:3px solid red;
    height:80px;
    width:200px;
    color:red;
}
#divTasks{
    width:300px;
    height:80px;
    border:10px solid orange;
    color:orange;
}

基本上，我需要divTasks站在divOfficers的右边，但不要伸展它。但这就是我得到的：

我已经清除了父div中的溢出，但是你可以看到这没有帮助。还有什么我需要做的？

Answer 1

只是给一个浮动：对于divtasks以及你浮动的权利：离开与divofficers。如果它是你想要的而不是你的问题解决了，或者让我知道你是否需要做其他事情并把你的代码放在jsfiddle上，因为它会有很大的帮助

Answer 2

尝试使用CSS3代码，如果你使用float可能有长内容的问题

.div-row {
    width:100%;
    overflow:clear;
    margin-bottom:5px;
    display: table;
}
.div-column {
    margin-right:3px;    
}
#divOfficers {
    border:3px solid red;
    height:80px;
    width:200px;
    color:red;
    display: table-cell;
}
#divTasks{
    width:300px;
    height:80px;
    border:10px solid orange;
    color:orange;
    display: table-cell;
}

演示：http://jsfiddle.net/vsok/dqmdv7oa/