HTML/CSS - 2-Spalten Layout nach Vorgabe (Aufgabe)

  • Hallo allerseits,
    ich sitze schon viel zu lange an folgender Aufgabe:
    "Erstellen Sie zu folgendem Screenshot das HTMLDokument. Verwenden Sie ein absolutes Zwei-Spalten Layout, die Navigationsspalte sollte 100 Pixel breit sein und der Abstand zwischen den Boxen 10 Pixel."


    Folgendes (unfertige) Dokument ist vorgegeben:


    Hier mein (mMn. bisher bester) Lösungsansatz:


    Wie man sehen kann ignoriert der article-block den nav-block einfach (abgesehen vom Inhalt, dieser umfließt den nav-block).
    Ich konnte das Problem sogar beheben indem ich article eine absolute Breite gegeben und 'float' ebenfalls auf 'right' gesetzt habe.

    HTML
    1. article {
    2. width: 200px; <!-- ausgedachter Wert -->
    3. float: right;
    4. margin: 10px 5px 10px 0;
    5. }


    Nur ich kann mir doch nicht einfach einen Wert für die Breite ausdenken...

  • Hallo


    Float ist überhaupt nicht für Layouts gedacht und hat zudem Nebenwirkungen. Zum Beispiel werden gefloatete Elemente aus dem Dokumentenfluß genommen. Float ist in diesem Zusammenhang also sachlich falsch und sollte nur Aufgaben übernehmen, für die es auch erstellt wurde. Nämlich damit Text andere Elemente, in der Regel Bilder, umfließt.


    Ich habe mal eine Lösung mit aktuellem HTML und CSS erstellt:



    In der Praxis werden noch ein paar zusätzliche Angaben erforderlich sein, aber ich habe nur die notwendigen Angaben zur Lösung der Aufgabe verwendet.


    Gruss


    MrMurphy

  • Float ist überhaupt nicht für Layouts gedacht und hat zudem Nebenwirkungen.


    Das hatte ich genau falsch herum in Erinnerung, kein Wunder das ich mit der Aufgabe solche Probleme hatte. Jedenfalls vielen dank für das Beispiel MrMurphy.


    Jedoch befürchte ich das du womöglich auf Methoden zurückgreifst die für den Stand der Aufgabe etwas zu fortgeschritten sind (konntest du natürlich nicht wissen) :).


    Ich habe jetzt nochmal alle meine Unterlagen durchgeblättert und bin nun ziemlich sicher das man diese Aufgabe mit 'position' lösen soll.


    Hier mein Ansatz:


    Es ist jetzt nicht 100% perfekt (z.B. falls article-height < nav-height) aber ich bin fürs erste zufrieden. Nochmal danke MrMurphy für den entscheidenden Hinweis.