CSS - how to set some divs inline - css

Question

Hi im trying to set some divs inline and i dont know what else to do.
.menuboton{
display:inline;
padding:0.7em;
border-radius: 4px;
background-color: #093;
}
.menu{
display:inline;
margin-right:4em;
}
There are two classes, first are 4 divs and the another is one div with an <img> inside. Those divs are inside another div:
#elmenu{
margin:auto;
margin-bottom:10px;
width:100%;
border-top:1px solid black;
border-bottom:1px solid black;
}
This is my problem: the 4 divs always are slightly below the one with the <img> inside and cross over the container div (elmenu). For fix that I tried setting it display:inline-block and fix the problem of exceds the container limit but still below the one with <img> inside.
Here the html code:
<div id="elmenu">
<div class="menu" id="logo"><img id="imglogo" src="psds/logo.png" /></div>
<div class="menuboton">Inicio</div>
<div class="menuboton">Posts</div>
<div class="menuboton">Login</div>
<div class="menuboton">Usuario</div>
</div>
Pics:
Using display:inline;
Using display:inline-block;
I want all divs stay at the same level!
Some guess?

Answer 1

Place the Knowit image in left and the menu in right and edit widths accordingly.
HTML:
<div class='container'>
<div class='left'></div>
<div class='right'></div>
</div>
CSS:
.container { overflow: hidden; margin:0; padding:0; }
.left{ float: left; width: 150px; }
.right { float: right; width: 150px; text-align:left; }
Edit on OP request:
To center object within div class use:
text-align:center;
to center align the div container use:
margin: 0 auto;
All this information can be found at http://w3schools.com/

Answer 2

You should try to use span instead of div. Also use float:left

Answer 3

vertical-align: middle on #elmenu should do the trick along with display: inline-block; on the logo and menu items.

Answer 4

first you should build your menu from a list or a nav tag.
Inline-block is a good idea, you can easily size and align your elements.
To build your menu you need:
inline-boxes
text-align:center.
line-height
float (just once)
First element (holding logo for instance) can float left.
set a line-height to size (min-)height of the nav bar.
here we come to this : http://jsfiddle.net/GCyrillus/CaR7a/
.menuboton {
display:inline-block;
padding:0.7em;
border-radius: 4px;
background-color: #093;
line-height:1.2em;
}
.menu {
float: left;/* logo */
}
#elmenu {
padding:0;
margin:0;
list-style-type:none;
line-height:48px;/* logo's height */
text-align:center;
border-top:1px solid black;
border-bottom:1px solid black;
}
a {
color:white;
text-decoration:none;
}
<ul id="elmenu">
<li class="menu" id="logo"><img id="imglogo" src="http://placehold.it/1&1" /></li>
<li class="menuboton">Inicio</li>
<li class="menuboton">Posts</li>
<li class="menuboton">Login</li>
<li class="menuboton">Usuario</li>
</ul>
I hope it is useful

Answer 5

Like my comment, the Css should like this
.menuboton{
float: left;
padding:0.7em;
border-radius: 4px;
background-color: #093;
}
.menu{
float: left;
margin-right:4em;
}
UPDATE:
HTML:
<div id="elmenu">
<div class="menu" id="logo"><img id="imglogo" src="http://www.winphoneviet.com/forum/data/avatars/l/35/35914.jpg?1370081753" /></div>
<div class="menuboton">Inicio</div>
<div class="menuboton">Posts</div>
<div class="menuboton">Login</div>
<div class="menuboton">Usuario</div>
<div style="clear: both;"></div>
</div>
This's Fiddle