DIV oben fixieren

    Hallo Community

    Ich habe ein kleines Problem und finde die Lösung einfach nicht:


    Ich habe drei DIVs:
    #content {
    margin-top: 5%;
    margin-left: 5%;
    width: 600px;
    background-color: red;
    }
    #component {
    background-color: #009900;
    height: 400px;
    overflow: auto;
    }
    #search {
    background-color: silver;
    width: 200px;
    height: 60px;
    background-position: 100px 20px;
    margin-top: -400px;
    float: right;
    position: static;
    }

    Diese sind so eingegliedert:
    <div id="content">
    <div id="component">
    Text
    </div>
    <div id="search">Suche</div>
    </div>

    Das ganze sieht dann zum Beispiel etwa so aus: http://ims.theblackwhitepro.ch/test2.html

    Nun will ich ja, dass es einen Scrollbalken gibt in component falls dessen Inhalt zu gross wird.
    Jedoch bleibt die Suche dann immer am gleichen Ort, scrollt also mit, sie sollte aber nicht mitkommen sondern verschwinden.
    Ich will damit verhindern, dass die Suche über den Text kommt.

    Ich hoffe ihr habt eine Lösung für mein Problem...

    Freundliche Grüsse und besten Dank
    thedvd

    Ok also wenn ich das richtig verstehe soll dein component-Element dein such-Element umfassen
    und oben rechts bleiben auch wenn im content-Element gescrollt wird !?

    Wie wäre es wenn du dein such-Element in den content Bereich schiebst mit

    Code
    margin-top 0px;
margin-right: 0px;
position: absolute;

    dann müsste es funktionieren ...

    Zitat

    ich will, dass das search div sozusagen mit scrollt...


    "Suche" scrollt bei mir immer mit

    Wow, im IE funktioniert es wie ich gerne hätte. Also so dass das Suchen-Feld beim runter scrollen auch nicht mehr sichtbar ist.

    Das mit dem search im component habe ich auch schon überlegt, jedoch muss es ja dann sofort nach dem component-div kommen und nicht erst nach dem Inhalt dieses.
    Dabei macht mir dann joomla einen Strich durch die Rechnung... :evil: Es soll ja oben Rechts und nicht unten sein...

    Ich nutzte Opera, dort scrollt das Suche-Element mit.
    ___

    Verstehe ich jetzt nicht ganz.
    Du willst deine Suchfunktionions-Element doch oben rechts in der Ecke haben oder ?
    Ohne das es mitscrollt..!?
    Wenn du sagen wir mal ein Content-Element hast was folgende Werte hat:

    Code
    #content {
margin-top: 100px;
margin-left: auto;
margin-right: auto;
float: center;
width: 500px;
height: 500px;
}

    und ein suchelement:

    Code
    #search {
margin-top: 0px;
float: right;
margin-right: 0px;
width: 150px;
height: 100px;
}

    und das in deiner html datei folgendermaßen einfügst:

    HTML
    <div id="content">
<div id="search">Suche</div>
</div>

    Müsste es funktionieren .. Habs aber grad nicht ausprobiert ..

    Danke für eure Hilfe...

    Im Prinzip stimmt Bleistifts Antwort zwar, jedoch ist sie bei mir nicht ganz Anwendbar, da das endgültige Design noch erweitert ist und Joomla den Inhalt eines DIVs oder Position vor dem nächsten DIV einfügt...

    Der Vollständigkeit halber hier noch kurz meine Lösung...
    <div id="content">
    <div id="comsearch">
    <div id="search"><jdoc:include type="modules" name="right-up" style="xhtml" /></div><!--#search-->
    <div id="component"><jdoc:include type="component" style="xhtml"/></div><!--#component-->
    </div>
    <div id="menu"><jdoc:include type="modules" name="left-up" style="xhtml" /></div><!--#menu-->
    <div id="login"><jdoc:include type="modules" name="left-down" style="xhtml" /></div><!--#login-->
    </div><!--#content-->

    Ich habe einfach noch ein DIV nur für den component und search Inhalt gemacht, da vorhin auch noch das Menü und das Login in content waren.
    Da nun search zuerst kommt bleibt es auch oben.

    CSS:
    div#content {
    width: 900px;
    }


    div#comsearch {
    float: right;
    width: 664px;
    height: 619px;
    overflow: auto;
    background-color: white;
    }


    div#search {
    width: 300px;
    float: right;
    padding-right: 4px;
    height: 50px;
    padding-top: 20px;
    text-align: right;
    padding-right: 20px;
    }


    div#component {
    padding-left: 10px;
    padding-right: 20px;
    padding-top: 5px;
    }


    Danke für die Hilfe nochmals :)