CSS: Sidebar mit zwei Containern: einer oben, einer unten

  • Hallo, liebe WP-Fans,

    ich bin seit einiger Zeit mit WP am Arbeiten und völlig begeistert :mrgreen:. Es kann sein, dass ich jetzt etwas blind :???: bin und einfach nicht die richtigen Wörter in das Suchfeld eingebe, aber ich finde nichts zu diesem Anliegen:

    Ich verwende auf Zum Glück gecoacht — das Classic-Theme. Funktioniert mit einigen Anpassungen wunschgemäß - prima.

    Ich habe einen großen Container names "Box", der links den Content-Bereich enthält und rechts eine Sidebar, die im Container "Menu" liegt. Kein Problem. Jetzt soll unterhalb des Menüs ein weiterer Container eingefügt werden, der sich aber nach unten, zum Footer hin ausrichtet.

    Hier ein Beispiel-Grafik meiner Anforderung:

    Wie realisiert man das?

    Ich wäre sehr dankbar für Links, die auf die richtigen Seiten verweisen bzw. einen kurzen Code, der mir das Prinzip verdeutlicht. :mrgreen:

    Ich wünsche euch ein schönes Wochenende.

    Bester Gruß
    CMSFan

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Das geht zwar grundsätzlich schon, aber es kommt darauf an, wie gut du mit CSS umgehen kannst. Dazu muss nämlich erst sicher gestellt sein, dass box und menu die selbe Höhe haben, egal, wieviel Inhalt jeweils drinnen ist.

    Wie wäre es, alternativ, wenn du das im Footer einbaust (gewissermaßen ein 2. Footer) ? dann hast du die Positionierung auf jeden Fall immer unten.

  • Hi perryzelda,

    danke für deinen Post. Es soll gerade kein normaler Footer sein, das wäre kein Problem. der fließende Content links und der SidebarFooter sollen immer automatisch auf gleicher Höhe enden.

    Ich habe mir CSS-Tutorials zu float etc. durchgelesen und bekomme zweifellos eine ganze Reihe von Elementen auf gleicher Höhe nebeneinander, nicht aber auf gleicher Breite untereinander gestellt - und zwar den einen nach ganz oben, den andern nach ganz unten. Und das ist sicher ganz einfach, nur eben Know-How, das ich noch nicht habe.

    Hättest ein wenig CSS-Code für mich, an dem ich das lernen kann oder einen Link, wo ich mr das anschauen kann?

    Beste Grüße
    CMSFan

  • habs es nicht ausgetestet, aber das wär eine Möglichkeit:

    Code
    <div id="box" style="position:relative;  padding:10px 250px 10px 10px; height:300px;">
      <div id="menu" style="width:180px; position:absolute; right:0; top:0;border-left:1px solid #000; height:300px; "></div>
       <div id="content" >
            
            <div id="sidebarfooter" style="position:absolute; right:0; bottom:0; width:180px; height:250px; border-left:1px solid #000;">
            </div>
      </div>
    </div>

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!