As I resize my browser window, the blue buttons shift below the logo on the left, aligning with the text "Welcome Bart" even though they belong to separate layers. I would like the text "Welcome Bart" to also move downwards so that they are not on the same line. What should I include in my CSS?
Sample HTML:
<div id="mainmenu">
<div id="logo"><img ... /></div>
<div id="usermenu">Buttons</div>
</div>
<div id="maintitle">
<h2>Welcome 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;
}