Text verschiebt sich im header

[Extremefall]

Hallo,
ich habe ein Problem. Der Text verschiebt sich im Header. Der Header besteht aus drei Div Abteilen (30,40,30).

Mein Code:

.logoheader {
width: 30%;
}
.searchheader {
width: 40%;
margin-left: 30%;
}
.linksheader {
width: 30%;
margin-left: 70%;
}

<div class="logoheader"><img class="logo" src="vp.png" alt="Vision-Sportal"></div><div class="searchheader"><form method="post" action="login-check.php">
    <input class="abstand" type="password" name="search" size="35"><input class="abstand" type="submit" value="Suchen"></form></div>
<div class="linksheader">Home EinladenLogout</div>

Das Problem ist, dass der Text im Div linksheader nicht auf der gleichen Höhe wie das Textfeld ist. Wie könnte man das beheben? Margin-Top zeigt leider keine Wirkung.

MFG

 

[der_gerrit]

Hey Extremefall,

ich habe grad mal getestet und denke die schnellste + einfachste Lösung wäre folgene :

Entferne aus den Klassen .searchheader und .linksheader die margin-left-Eigenschaft. Und danach fügst du einfach das folgene CSS noch hinzu :

.logoheader, .searchheader, .linksheader {
float: left;
}

Dann stehen die alle nebeneinander und sind auch noch, wegen der variablen Breiten-Angabe skalierbar.

 

[Extremefall]

Die Möglichkeit funktioniert leider nicht, da alle elemente dann links ausgerichtet werden.
Ich werde es jetzt wohl so machen, dass ich es bei zwei DIVs belasse und die Links mit in das DIV der Suche bringe. Dann kann ich ja noch dazwischen einen Abstand festlegen.

 

[Extremefall]

Habe es nun fast. Nur der rechte Teil ist unter dem mittleren. Habe ich es falsch gefloatet?

.logoheader {
width: 30%;
height: 37px;
float: left;
background-color: #003399;
}
.searchheader {
margin-left: 30%;
margin-right: 30%;
height: 37px;
background-color: #003399;
}
.linksheader {
width: 30%;
height: 37px;
float: right;
background-color: #003399;
}

 

[der_gerrit]

Schiebe den .linksheader-div mal ganz nach oben, also vor logoheader. Meistens verschwindet der Versatz dadurch.