Spaltendarstellung/Floats bei kleineren Bildschirmen

[herrweiss]

Hallo,

ich habe ein Problem bei der Responsive Anpassung eines 3 Spalten Layouts:

Bei einer verkleinerten Fensteransicht soll die linke Spalte (#left) unter die Hauptspalte (#main) rutschen und die rechte Spalte soll weiterhin nach rechts floaten. Und nun zu meinem Problem: Die rechte Spalte orientiert sich leider an der linken Spalte und wird erst auf der Höhe der linken Spalte gefloatet und nicht auf der Höhe der Hauptpalte (#main). Dieses Verhalten leuchtet mir auch ein, aber ich habe keine Idee wie ich das beeinflussen kann. Hier eine Beispielskizze: beispiel_spalten.jpg

Mein CSS Code:

@media (max-width: 768px) {

#main,
#left,
#right {
float: none;
position: relative;
margin-right:0;
margin-left:0;
left:0;
right:0;
box-sizing: border-box;
}

#main,
#left {
width: 70%;
float: left;
}

#right {
float:right;
width: 30%;
}

}

Hat jemand eine Idee wie ich das Problem lösen könnte?

[tab]

Warum nicht die gleiche Technik benutzen wie bei den ursprünglichen drei Spalten? Leider alles völlig ungetestet, da ich momentan keine passende Testinstallation habe.

@media (max-width: 767px) {

    #container {
        padding-right:180px;
    }

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

    #right {
        width:180px;
        margin-right:-100%;
    }
}

Edit: Das wäre jetzt für eine Spaltenbreite der Seitenspalten von 180px. Falls du prozentuale Breite willst, eventuell die 180px überall durch 30% ersetzen.

[Webbaumeister]

Vielleicht hilft es im fe_page.html5-Template die rechte Spalte vor der linken auszugeben.

[tab]

Also meine "Lösung" funktioniert leider nicht, sieht dann genauso aus wie bei dir. Da passt dann eventuell der Floating Context nicht mehr, right orientiert sich an left.

Unschöne - aber funktionierende - Alternative wäre, die rechte Spalte absolut zu positionieren, also

@media (max-width: 767px) {

    #container {
        padding-right:30%;
    } 

    #right {
        width:30%;
        position:absolute;
        right:0;
        top:0;
    }
}

Also ganz ohne Float-Gedöns.