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

由于某些原因，我无法想出如何使我的searchContainer显示在徽标的右侧，并使其填充顶部标题的剩余空间

有人能帮我吗？我知道我很接近。这是一本书

HTML

---

看起来您可能需要做的就是添加左边距：165px；到您的搜索栏样式。所以

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

我在这里用了我自己的答案。另外，我计算出了165px的值，方法是将角落盒的50px宽度+徽标的100px宽度+徽标周围额外的15px边距相加

---

.

谢谢，我不知道我必须增加保证金。

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

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