Div-Box in Header einbinden

[Bathroth]

Hey Leute,

Ich habe folgendes Problem. Ich will in meinem Header an der unteren Stelle rechts eine Div Box mit Suche Festlegen.

Klappt auch ohne Probleme. Nur ist mein Problem das diese Div box nicht an die Stelle geht wo ich sie haben will. Vorher hatte ich eine Tabelle wo die Div Box drinlag und es ging ohne Probleme. Nun baue ich alles auf Div-boxen um und schreibe mehr Daten in die CSS-Datei (was auch mehr Sinn macht).

<div class="page">    <div class="header">        <div class="div_search_punkte">            <br><br><br>            <strong>Suche:</strong>            <input type="text" id="search_text" name="search_text" class="suchbox" onKeyPress="javascript: searchEnter();">            <a href="javascript: startSearch();"><img src="http://www.html.de/images/icons/magnifier.png" class="icon"></a>            <!--<a href="http://google.de" target="_blank">            <img src="http://www.html.de/images/icons/help_small.png" class="icon">Link!!!</a>-->            <a class="punkte">Punkte!!</a>        </div>    </div>
<!--...--></div>

Betroffener CSS-Code:

.page {    text-align: center;
    vertical-align: top;
    width: 1000px;    
}


.header {
    vertical-align: bottom;
    background-image: url(/images/header.png);
    background-repeat: no-repeat;
    width: 1000px;
    height: 150px;
}


.div_search_punkte {
    border-bottom-width: 9px;
    margin-bottom: 12px;
    margin-right: 15px;
text-align: right;
}

Ich will das diese Divbox unten Rechts liegt mit ein wenig Margin-arbeit damits net direkt dranklatscht. Aber irgendwie versteh ich net was daran falsch ist:
Vertikal - Bottom : vertical-align
Horizontal - right: text-align

oder lieg ich da grade falsch?

Greetz
Bathroth

 

[threadi]

Ja, du liegst falsch. Verwende

float: right;

dann wird die Suchbox von allen nachfolgenden Inhalten links umflossen - steht somit an der rechten Seite (inkl. dem von dir gesetzten Abstand nach rechts etc.).

Tipp: Wenn Du schon eine Suchbox einbindest, verwende auch ein <form>-Element. Die Eigenschaften die Suchbox inkl. Beschriftung dort anzuordnen, kannst Du dann dem <form>-Element geben. So sparst Du bedeutungsfreie <div>-Elemente.