Position elements horizontal

Hey people!

I'm having a bit of a problem positioning two things next to each other. Here's a picture of what I'm trying to do:
Horizontal bar (http://www.tjoff.com/jens/navbar.jpg)

If you look at the orange bar, you'll see I have a few text links on the left and a small form to the far right. Easy to do with a table and some valign properties, but I'd like to manage without.

The text links are an unordered list element. This is the markup:

<div id="nav">
<form action="">
<input type="text" />
<input type="password" />
<input type="submit" value="Logga in" class="button" />
</form>
<ul>
<li><a href="#">Artiklar</a></li>
<li class="current"><a href="#">Recensioner</a></li>
<li><a href="#">Nyheter</a></li>
</ul>
</div>

If I have to float something, I'd like it to be the form, because it will only be displayed if the user is not logged in. However, I can't get it to work with paddings and margins. This is what happens if I put float:right on the form: Horizontal bar (http://www.tjoff.com/jens/navbar2.jpg)

I ended up making it position:absolute, but that apparently broke something in IE. Is there an easy way to position things horizontally with a "valign" center sort of effect?

Cheers

vertical-align:middle or line-height:
Seeing the ccs would be useful.

If you know the relative height of what you're trying to center you can always set the top: 50% and apply a negative top margin to half of the height of the element. IE:

li#artiklar {
height: 2em;
width: auto;
position: absolute;
top: 50%;
left: 0;
margin-top: -1em;
}

Sure, here's the css:

#nav {
margin:7px 0;
padding:8px 5px;
background:#deaf40;
}

#nav ul {
list-style:none;
}

#nav li {
display:inline;
margin:0 7px;
}

#nav form {
float:right;
}

#nav form input {
padding:2px;
border:1px solid #a9842c;
background:#ebe2cc;
font:9px verdana;
}

#nav form .button {
border:0;
background:#9e7921;
color:#fff;
}

Tried applying vertical-align almost everywhere to no visible effect. How should I use it?

Sure, here's the css:
Tried applying vertical-align almost everywhere to no visible effect. How should I use it?

Vertical-align is not intended to be used for vertically centering elements on a page (oddly enough).

If used in the context of table cells (like td or th) then vertical-align will behave as you'd expect.

If used on inline elements (non-block level elements such as img or strong) they actually behave like the old depreciated img attribute "align." This has more of an effect on the text that wraps around the element than the element itself.

If used on any other element the rule is typically ignored (implicitly overridden to "inherit") which is what you're noticing.

Line height, or positioning the element (like I mentioned above with the top: 50%) are the recommended methods for vertical centering. Vertical-align is often misunderstood and misapplied in this context.