3-spaltiges Layout responsive zunächst zweispaltig machen

Liebe Gemeinde,

ich habe ein dreispaltiges Layout (Holy Grail mit dem Contao-Layoutbuilder) und würde nun ab ca. 1280px Breite zunächst gern die linke Spalte nach unten verschieben, also ein zweispaltiges Layout erstellen, bevor bei 768px dann alles einspaltig wird. Ich bin aber wohl irgendwie zu doof. Ich probiere es mit folgendem CSS:

Code:

---

#wrapper {
    width:auto;
    margin:0;}

#left {
    width:100%;
    right:0;
    float:none;
    margin-left:0;}

#container {
    padding-left:0;}

---

Das funktioniert aber nicht richtig, die linke Spalte verschwindet einfach. Ich denke es liegt daran, dass ich die floats clearen müsste, aber wenn ich der linken Spalte ein clear: left gebe floated natürlich die rechte Spalte auch nicht mehr …

Habt Ihr eine Idee wie das klappen könnte? Es dürfte ja eigentlich keine ungewöhnliche Anforderung sein?

Vielen Dank schon mal für jede Hilfe!

Christina

Hallo,

zuerst brauchst du Media-Queries um überhaupt die 1280px-Bedingung abfragen zu können. :cool:

Ja klar, der Media-Query ist da: (screen and (max-width: 1279px).
Das ist nicht das Problem, das Layout wird ja auch zweispaltig wie gewünscht, nur die linke Spalte wird eben nicht unterhalb #main gezeigt, sondern verschwindet.

Christina

Hast du einen Link zur Seite oder den Code? Sonst kann ich leider nur raten. Wobei ich vermute, dass sich das eh nur mit Flexbox lösen lässt, sofern die Spalten keine festen Höhen haben.

Wie soll das denn dann aussehen? Am ehesten wird es ja noch gehen, wenn die ehemalige linke Spalte die gleiche Breite bekommt wie die Hauptspalte und die rechte Spalte bleibt rechts daneben, kann also auch unten neben der (ehemals) linken Spalte weitergehen. Das liesse sich recht einfach machen:
Alle floats für die Spalten raus / überschreiben mit none
Beim #container padding-left raus
Bei #left die margin-left, width und das right raus / überschreiben
Bei #right position: absolute; top: 0; right 0;

Hoffentlich habe ich jetzt nichts vergessen, habe es mal im Inspektor von Firefox versucht und da hat es soweit gut ausgesehen.

Edit: Bei #right noch die margin-right natürlich überschreiben.

Edit2: Das Stylesheet mit der Media Query kann also z.B. so aussehen:

HTML-Code:

---

#main,
#left,
#right {
    float:none;
}

#container {
    padding-left:0;
}

#left {
    width:auto;
    left:0;
    margin-left:0;
}

#right {
    right:0;
    top:0;
    position:absolute;
    margin-right:0;
}

---

@dazzle89: die Seite ist noch im ganz frühen Stadium und nur lokal bisher.

@tab: Ja, so war es gemeint: die rechte Spalte bleibt erhalten (bis zur Breite 768px, wenn alles einspaltig wird).

Prima, mit deiner Methode scheint es zu gehen, ich habs gerade mal grob probiert.
Die floats raus und die rechte Spalte absolut positioniert, da bin ich nicht drauf gekommen!

Herzlichen Dank für die schnelle Hilfe!

Christina