Aligning divs and ul

1. I need the menu (home, portfolio, services, about) is aligned in the middle and left.
2. The div#header-login should be flush right

How ca开发者_运维百科n I accomplish these tasks?

To solve the first problem, I put the divs with display: inline; but for some reason the ul#header-menu is leaving a space at the top

To solve the second problem, I tried to put the div#header-login with 100% width and thus align the text to the right but failed.

Here is the complete code:

---

The easiest way to achieve this is to make sure you float everything in the header. With the current mix of some float and some non-float (plus some elements with display:inline), this will be tricky to manage and potentially problematic if you need this to work in older versions of Internet Explorer.

I've made a few small modifications to your jsFiddle. This now floats the 3 elements in the header and applies float clearing to the header div itself so that the content after the header clears properly (there are also commented examples of how you'd need to do this for the IEs with conditional stylesheets).

http://jsfiddle.net/y4Qyw/1/

I've not tweaked the spacing specifically, but it should be a formality now to position everything where you want with some padding and/or margin. Automatic vertical positioning in this situation isn't possible unless you're working with display:table-cell (which isn't entirely cross browser), so you'll just need to vertically offset your menu downward to get it centre-aligned.

---

Here is the deal:

div#header
{
    clear:both;
    overflow:hidden;
}
div#header-login
{
    text-align: right;
    overflow:hidden;
    float:right;
    margin-top:-30px;
}
img#header-logo
{
    display: block;
    float:left;
}

ul#header-menu
{
    margin: 0 auto;
    padding: 15px;
    display: block;
    list-style-type: none;
    overflow:hidden;
}