html - ブラウザのサイズ変更時のレイヤーの位置

Question

ブラウザ ウィンドウのサイズを変更すると、青いボタンが左側のロゴの下に表示されます。2 つの異なるレイヤーですが、「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

これを使って

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

Answer 3

に追加overflow:hiddenし#mainmenuます。これにより、要素などのすべての浮動要素が高さに含まれ、#usermenuフローがその下で継続できるようになります。