CSS: Alignment when floating

Question

I have some page navigation buttons + a dropdown box that I'm trying to display side-by-side but they are not cooperating with each other.

Both items are to float right. Fiddle: http://jsfiddle.net/u9dBm/1/

What's wrong:

• the red cross is what is happening now
• the red cross and green tick is what should be like but you'll notice that the dropdown is one pixel short on the top when by iteself away from the pages they are the same height...
• green tick is what it should be like

Why are the two object playing silly buggers with their height?

Unrelated to the problem, but something I'm curious about... Why when I put the SPAN containing the dropdown AFTER the pages one, it displays to the left? Logically (or mine at least), since it is in code AFTER it and not before, it should display afterwards?

Answer 1

I wouldn't use float at all for this. I made some changes to your code, let me know what you think: http://jsfiddle.net/Wexcode/g2Z5k/

Answer 2

I messed around with some relative positioning, and I got this: http://jsfiddle.net/u9dBm/6/ I added

 position: relative;
 top: -6px;

to the end of .dropdown > li to make it appear 6 pixels higher than it's supposed to. I can't tell you why it was rendering down there in the first place, but I can give you a crappy fix.

BTW, I really liked the demo.