html - 调整浏览器大小时图层的位置

Question

当我调整浏览器窗口大小时，蓝色按钮位于左侧 Logo 下方，与文本“Welkom Bart”在同一行，尽管它们是两个不同的层。我希望文本“Welkom Bart”也降低，因此它们不在同一行。我需要向我的 CSS 添加什么？

html 例如

<div id="mainmenu">
    <div id="logo"><img ... /></div>
    <div id="usermenu">Buttons</div>
</div>

<div id="maintitle">
    <h2>Welkom Bart</h2>
    <hr />
</div>

CSS

#mainmenu {
    height: 100px;
    position: relative;
}
#logo {
    float: left;
    width: 200px;
    margin-right: 20px;
}
#usermenu {
    float: right;
}
#maintitle {
    margin-bottom: 20px;
}
#maintitle hr {
    color: #56c2e1;
    display: block; 
    height: 1px;
    border: 0; 
    border-top: 1px solid #56c2e1;
    margin: 10px 0;
}

Answer 1

将 clear:both 添加到 #maintitle =)