Search code examples
htmlcsslayoutalignmentcss-float

CSS: Alignment when floating

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/

enter image description here

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?

enter image description here

Solution

  • 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/