2

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

Alex Guerin
  • 2,336
  • 10
  • 36
  • 53

2 Answers2

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/

Wex
  • 15,539
  • 10
  • 64
  • 107
  • Thanks Wex. I don't suppose you're able to fix the dropdown to look like my Fiddle (the individual highlighting of sub items you've added)? – Alex Guerin Jan 07 '12 at 00:42
  • If you give me until tomorrow I'll have something for you. – Wex Jan 07 '12 at 06:16
0

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.

Different55
  • 577
  • 2
  • 17
  • **Quote:** _"...I can't tell you why it was rendering down there in the first place, but I can give you a crappy fix."_ Seriously, that says it all. You don't understand the root cause and you already think your own answer is crappy. – Sparky Jan 07 '12 at 01:37