Divs aligned to left and center on the same line - html

Question

I am trying to layout a page to look like this: http://jsfiddle.net/LLqwX/1/
But I cannot figure out how to get the divs "logo" and "sometext" to be on the same line as the buttons. I would like it all to stay as it is, with the same colors everywhere, just that the top two lines would become friends and want to stay on the same line together.
HTML
<div id="top">
<div id="logo">logo</div>
<div id="sometext">text text</div>
<div id="menu">
btn 1
btn 2
btn 3
</div>
</div>
<div id="content">
<div id="hello">
hello
</div>
</div>
CSS
#top {
background: #ccc;
}
#logo {
display: inline-block;
background: #ff00ff;
}
#sometext {
display: inline-block;
background: #ffff00;
}
#menu {
text-align: center;
}
#content {
background: #444;
}
#hello {
width: 40%;
margin: 0 auto;
background: #888
}

Answer 1

Simply add display: inline-block to the #menu.
http://jsfiddle.net/LLqwX/3/

Answer 2

You could use the same inline-block method you've used elsewhere:
#menu {
display: inline-block;
text-align: center;
}
http://jsfiddle.net/LLqwX/2/
EDIT:
I realize that you probably want the buttons to remain centered.
There are many methods of structuring this, but I tried to minimize changes to your original code.
<div id="headleft">
<div id="logo">logo</div>
<div id="sometext">text text</div>
</div>
div#headleft {
position:absolute;
}
http://jsfiddle.net/LLqwX/4/

Answer 3

Another way to keep the buttons centered is to use a flex layout.
Here is a FIDDLE showing how.
CSS
#top {
background: #ccc;
display: flex;
}
#logo {
display: inline-block;
background: #ff00ff;
}
#sometext {
display: inline-block;
background: #ffff00;
}
#menu {
display: inline-block;
text-align: center;
flex: 1;
}
#content {
background: #444;
}
#hello {
width: 40%;
margin: 0 auto;
background: #888
}