Positionierung mit float

...mal wieder =)

In diesem layout wollte ich in der Topnavi (Balken unter dem Header) vertikal zentriert ein Such-Eingabefeld platzieren. In Safari und Iron funktioniert das auch, in Firefox, IE und Opera hingegen nicht. Ich habe shcon lange nichtmehr mit float positionierungen gearbeitet, und habe das problem bisher nicht gefunden.
Ich wär also froh wenn mir einer von euch sagen könnte wie ich das sinnvoller mache. Es muss nicht mit float sein, auch wenn ich das wohl kaum vermeiden kann. Das ding soll einfach rechtsbündig in dem Topnavi Balken vertikal zentriert werden.

Der relevante Code, falls ihr den ganzen wollt im Quelltext nachprüfen

<div id="topnavi">
	<p>Some Menu Items | Some more | Yet another one</p>
	<form action="/index.php" method="get" id="search">
		<input type="hidden" name="special" value="search" />
		<input type="search" placeholder="Search..." autosave="bsn_srch" results="5" name="q" value="" size="10" maxlength="99" class="search-input" />
		<input type="submit" value="Suche" class="search-button" />
	</form>
</div>

#topnavi {
	height: 40px;
	line-height: 40px;
	background: #999;
	padding-left: 1em;
}


#topnavi p {
	width: auto;
	float: left;
}


#search {
	float: right;
	margin-right: 10px;
}

Danke schon im voraus,
-Lukas

PS: Keine designbewertungen bitte, die ganzen graus sind erst platzhalter =) geht bisher nur um die Positionierung

EDIT1: <snip>Das Problem zum footer wurde gelöst, da hab ich schlicht eine Codezeile vergessen. Beim Searchbox-Problem hingegen komm ich auf keinen grünen Zweig...

EDIT2: Ok, firefox machts mittlerweile Richtig, jetzt ist nur noch die Vertikale zentrierung bei IE und Opera ein problem.

Sorry wegen Doppelpost, aber ich wollte nicht noch einen Edit machen...

Ich habe mittlerweile verschiedenste Methoden zur vertikalen Zentrierung versucht (z.B. die mit position: absolute; top: 50%; usw) und irgendwie wollte keine bei mir funktionieren. Ich könnte natürlich die Höhe der Topnavi wieder fix machen (ist atm. 2,5em) und dann den margin-top manuell eingeben so dass es zentriert ist, aber mir wär eine flexible Variante eigentlich lieber.
Erkennt irgendwer warum die normalen Methoden nicht ziehen bei mir?

-Lukas

Das Suchfeld soll einfach rechtsbündig in der Mitte der div #topnavi stehen, so wies im Safari dargestellt wird (Bild)

Dummerweise sieht das ding in jedem Browser etwas anders aus. Wenn ich Topnavi eine höhe von 2,5em geb und #search eine Höhe von 1,5em, dann sollte ich #search mit

[code]
#search {
float: right;
margin-top: 0,5em;
<etc>
}

In der Mitte positionieren können, das sieht dann aber in jedem browser wieder anders aus, Zentriert ists mit jeder Methode die ich bisher versucht hab immer nur im Safari, FF und Iron/Chrome

PS: Flexibel ists halt insofern, dass das Layout nicht kaputt gehen soll, wenn jemand die schriftgrösse hochdreht.

offensichtlich nicht, im firefox gehts ja, im opera nicht.