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

Question

当我调整浏览器窗口的大小时，蓝色按钮位于左侧徽标下方，与文本“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 =）

Answer 2

将overflow:hidden添加到#mainmenu。这将导致其高度包括所有浮动元素，例如#usermenu元素，允许流在其下方继续。

Answer 3

使用此

<div id="maintitle" style="width:100%">
<h2>Welkom Bart</h2>
<hr />