Aligning items using display: inline-block;

Question

I have a problem that i don't know how to fix.

This is my JSFiddle code.

I don't know how to get all of the items inside the top bar properly. There also happens a strange thing: when i put some text inside the ID=toplogo, all the elements shift a bit. What causes this problem and how can i fix it?

please help

Answer 1

Edited your fiddle.

Basically I added:

overflow:hidden

..to your inline-blocks and set

line-height = height of block

..to align the text instead of using padding.

Check out the edits here

Answer 2

why you use padding-top for those login and signup ?

It is suggested to use <ul> instead of div's for menu

You want to achieve like this ?

check this fiddle