Seitenaufbau mit div's - wo steckt der Fehler? :-)

    Erst mal der bisherige Quellcode:

    So sieht das ganze nun im Browser aus:
    http://easycaptures.com/0814491235

    Was ich nicht verstehe ist folgendes:
    Man sieht direkt unter dem Header-Bild eine schwarze Linie. Das ist wohl das "border:1px solid #000000;". Wieso aber wird dies direkt unter dem Bild angezeigt. Laut Code dürfte das div doch erst nach dem Menü (Startseite, Neuer Auftrag, etc) kommen. Und eigentlich schließt das div ja noch weitere div's ein. Dh eigentlich müsste doch ein schwarzes Viereck zu sehen sein, in dem die beiden unteren div's plaziert sind.

    Ich hoffe, dass mir jmd weiter helfen kann.

    Danke schon mal im voraus!

    Ich kann dir nicht auf Anhieb helfen, aber vielleicht hilft es, wenn du dir das Web Developer-Addon für Firefox runterlädst und dir da unter Information "Display Div Order" anzeigen lässt.
    Ansonsten könntest du das border:1px solid #000000; ja testweise rausnehmen und gucken, ob es wirklich daran liegt.

    Information will frei verfügbar sein.

    Don't eat unpeeled hedgehogs.

    Es wäre besser, wenn du ne URL statt nem Bild posten würdest...dann kann man sich das Verhalten der einzelnen Divs direkt angucken und muss net rumraten...

    Das FF Addon nutze ich, jedoch hilft es mir gerade leider nicht weiter.
    Habe den ganzen Kram lokal liegen und kann daher keine URL posten.

    Ich fange mal etwas grundlegender an. Verstehe nicht wo ich nen Fehler mache.

    Code
    <div style="width:800px;">
    <div style="width:auto; height:100px; background-color:green; clear:both;">header</div>
    <div style="clear:both; width:auto; background-color:blue;">nav</div>
    <div style="clear:both; width:auto; background-color:grey;">main
        <div style="float:left; width:200px; height:300px; z-index:3; background-color:black;">col1</div>
        <div style="float:right; width:200px; height:300px; z-index:5; background-color:red;">col2</div>
    </div>
</div>

    Müssten in diesem Fall die beiden letzten div's (col1 und col2) nicht innerhalb des grauen div's liegen?

    Du hast vergessen, zu clearen: "Wo gefloatet wird, muss auch gecleart werden."

    Also nach den zwei Containern einfach noch ein

    Code
    <div style="clear:both;"></div>


    einfügen.
    Und wo wir schon dabei sind: Du musst nicht jedes Mal ein "clear:both;" angeben, wenn du den Container erst in der nächsten Zeile haben willst.
    Das funktioniert automatisch, da <div> ein Block-Element ist und automatisch die maximal verfügbare Breite annimmt, wenn nicht anders definiert.

    MfG, Chris :)

    Ich hab einfach zwischenzeitlich überall ein clear reingepackt, weil ich am verzweifeln bin. Eigentlich hatte ich noch nie Probleme mit div's, aber gerade komme ich kein Stück weiter.

    Welche Stelle meinst du mit "nach dem zweiten Container"?

    Meinst du nach
    <div style="clear:both; width:auto; background-color:blue;">nav</div>
    folgendes einfügen?
    <div style="clear:both;"></div>

    Er meint:

    HTML
    <div style="width:800px;">
    <div style="width:auto; height:100px; background-color:green; clear:both;">header</div>
    <div style="clear:both; width:auto; background-color:blue;">nav</div>
    <div style="clear:both; width:auto; background-color:grey;">main
        <div style="float:left; width:200px; height:300px; z-index:3; background-color:black;">col1</div>
        <div style="float:right; width:200px; height:300px; z-index:5; background-color:red;">col2</div>
        <div style="clear:both"></div>
    </div>
</div>

    Du musst wenn 2 oder mehrere Elemente in einem Anderen floaten, nach den Floats clearen, weil sich wie in deinem Fall das äußere Div nicht um seinen Inhalt rum spannt...