CSS - how to set some divs inline

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"><a href="index.php">Inicio</a></div>
<div class="menuboton"><a href="Posts.php">Posts</a></div>
<div class="menuboton"><a href="login.php">Login</a></div>
<div class="menuboton"><a href="usuarios/actividadUsuario.php">Usuario</a></div>

</div>

Pics: Using display:inline;

Using display:inline-block;

I want all divs stay at the same level! Some guess?

Answer 1

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"><a href="index.php">Inicio</a></div>
    <div class="menuboton"><a href="Posts.php">Posts</a></div>
    <div class="menuboton"><a href="login.php">Login</a></div>
    <div class="menuboton"><a href="usuarios/actividadUsuario.php">Usuario</a></div>
    <div style="clear: both;"></div>
</div>

This's Fiddle

Answer 2

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:

1. inline-boxes
2. text-align:center.
3. line-height
4. 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"><a href="index.php">Inicio</a></li>
    <li class="menuboton"><a href="Posts.php">Posts</a></li>
    <li class="menuboton"><a href="login.php">Login</a></li>
    <li class="menuboton"><a href="usuarios/actividadUsuario.php">Usuario</a></li>
</ul>

I hope it is useful

Answer 3

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 4

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

Answer 5

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