将浮动div旁边的元素对齐并填充剩余空间

Question

由于某些原因，我无法弄清楚如何让我的searchContainer显示在#logo的右侧，并使其填充top-header的剩余空间。

任何人都可以帮我吗？我知道我很亲密。这是一个jsfiddle。

HTML

<div id="top-header" class="slide"> 
    <div id="cornerBox">&nbsp;</div> 
    <a id="logo" href="/">&nbsp;</a> 
    <div id="searchBar">&nbsp;</div> 
</div> 

CSS

#cornerBox { 
    float:left; 
    width:50px; 
    height:50px; 
    background-color:#3CC274; 
} 
#top-header { 
    position:absolute; 
    height: 56px; 
    width:100%; 
    min-width:595px; 
    max-height: 50px; 
    background-color:#24BD66; 
    color:#fff; 
    z-index:3; 
    box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .23); 
} 
#logo { 
    display:block; 
    text-decoration:none; 
    float:left; 
    width:100px; 
    margin:10px 0 0 15px; 
    border:1px solid black; 
    height:30px; 
} 
#searchBar { 
    border-radius:3px; 
    height:35px; 
    margin-top:7px; 
    background-color:#5ECD8C; 
} 

Answer 1

它看起来像所有你可能需要做的就是添加margin-left: 165px;您#searchBar风格。所以，

#searchBar { 
    border-radius:3px; 
    height:35px; 
    margin-top:7px; 
    margin-left: 165px; 
    background-color:#5ECD8C; 
} 

我用this StackOverflow answer在这里提出我自己的答案。此外，我通过将0123px50px的宽度与#logo的100px宽度+ #logo的附加15px边距相加，得出165px的值。

JSFiddle。