[Gelöst] Responsive-Grid (reine Prozentangaben) mit dreispaltigem Layout kombinieren

Liebe Leser,

ich bin gerade dabei mir ein eigenes Responsive-Grid-System ausschließlich mit Prozentbemaßungen aufzubauen (18 Spalten). Dieses Grid soll später mit einem dreispaltigen Holy-Grail-Layout kombiniert werden, wobei die linke und die rechte Layout-Spalte vergleichbar jeweils 3 Grid-Spalten in der Breite einnehmen sollen. Für den mittigen Container verbleiben somit noch 12 freie Spalten für die spätere Verwendung mit Artikeln.

.grid3 + .grid12 + .grid3 = .grid18, das würde also passen.

Nun komme ich allerdings an einem Punkt nicht mehr weiter, der bei meinen vorigen Versuchen mit absoluten Maßangaben relativ einfach zu lösen war.

Der Wrapper nimmt 60 % der Display-Breite ein, die linke und die rechte Layout-Spalte wiederum (#left und #right) sollen jeweils 16.66% der Wrapper-Breite einnehmen.

So soll es also aussehen:

#left	#main	#right
16,66 % des Wrappers (≙ .grid3)	66.66 % des Wrappers (≙ .grid12)	16,66 % des Wrappers (≙ .grid3)

Der Holy-Grail funktioniert bislang absolut problemlos.

Die CSS-Deklaration für die Breiten- und Positionsangaben von #left und #right sieht aus wie folgt:

Code:

---

#left { right: 16,66%; }                        /* Breite der Seitenspalten */

#left, #right { width: 16,66%; }                /* Breite der Seitenspalten */

#container {        padding-left: 16,66%;                /* Breite der Seitenspalten */
                padding-right: 16,66%;        }        /* Breite der Seitenspalten */

---

Komischerweise funktioniert diese Anweisung jedoch nicht so wie gewünscht: Sowohl #left als auch #right nehmen keine 16,66 % der Wrapper-Breite ein, und #left wird zudem unerwünscht nach rechts eingerückt und ist somit nicht mehr bündig mit der linken Wrapper-Außenkante...

Wo liegt mein Denkfehler? Wenn ich die CSS-Deklaration auf absolute Maßangaben (Pixel) abändere, dann funktioniert alles problemlos. Beziehen sich denn die prozentualen Maßangaben vielleicht nicht auf den Wrapper? Und wie läuft es später mit der Grid-Benutzung in den Artikeln: Werden die sich dann auf die Wrapper-Breite beziehen oder lediglich auf die Breite des jeweiligen Elternelements?

Ich glaube im Übrigen einmal irgendwo gelesen zu haben, dass Prozentangaben in Kombinaton mit einem Dreispalten-Layout nicht so ohne Weiteres funktionieren?

Besten Dank für Eure Hilfe! :)

Viele Grüße
KloBoBBerLe

Holy Grail funktioniert nicht mit relativen Breiten.

Zitat:

---

Zitat von Spooky

Holy Grail funktioniert nicht mit relativen Breiten.

---

Hallo,

gleiches Thema gabs schon mal ... und richtig muss die Aussage heissen ... "Holy Grail funktioniert nicht mit relativen Breiten und dem Conto-Layoutbuilder"

https://community.contao.org/de/show...w-deaktivieren

Nein, das Holy Grail Layout funktioniert generell nicht mit relativen Größenangaben für die seitlichen Container ;). Die erwähnten Lösungen decken nicht alle Eigenschaften des ursprünglichen "Holy Grail" Layouts ab, soweit ich mich erinnere.

Hmm, generell ist immer so .... generell.:D
Sicher ist, mit dem Layoutbuilder funktioniert es nicht (richtig). Es funktioniert eben dann nicht richtig, wenn die Breitenangabe für die Seitenspalten gleich ist wie das Padding des #container. Aber, was ist, wenn man die Breitenangabe (oder das Padding) korrigiert, so dass sie in Pixeln gleich sind? Ok, eventuell bekommt man das Rundungsprobleme nicht 100%-ig hin für alle Breiten.

Idee wäre also z.B. (einfaches Beispiel, für andere Spaltenbreiten müsste man ein wenig rechnen)
#container mit padding-left und padding-right jeweils 25%, was der gewünschten Breite der Seitenspalten entspricht.
#main bleibt wie gehabt bei width:100%;
#left erhält width:50%;right:50%;
#right erhält width:50%;

Zitat:

---

Zitat von Spooky

Nein, das Holy Grail Layout funktioniert generell nicht mit relativen Größenangaben für die seitlichen Container ;). Die erwähnten Lösungen decken nicht alle Eigenschaften des ursprünglichen "Holy Grail" Layouts ab, soweit ich mich erinnere.

---

Sorry aber das ist einfach mal Quatsch ...

Zitat:

---

Zitat von NetMediaWork

Sorry aber das ist einfach mal Quatsch ...

---

Die Ziele des Original "Holy Grail" Layouts waren folgende:

1. have a fluid center with fixed width sidebars,
2. allow the center column to appear first in the source,
3. allow any column to be the tallest,
4. require only a single extra div of markup, and
5. require very simple CSS, with minimal hacks patches.

Mit relativen Breiten gibt es die Problematik, die das "Holy Grail" Layout löst, eigentlich gar nicht, da man sowieso für alle 3 Spalten eine Breite angibt (da ja alles relativ sein soll) - also auch für die Hauptspalte.

Die Lösung von http://matthewjamestaylor.com/blog/perfect-3-column.htm hat daher auch eigentlich nichts mit dem "Holy Grail" Layout zu tun, sondern erfüllt einfach folgende Anforderungen:

1. have relative sized columns
2. allow the center column to appear first in the source,
3. allow any column to be the tallest, and
4. allow column backgrounds that always stretch to the height of the largest column.

Punkt 4 und 5 aus dem eigentlichen "Holy Grail" Layout fallen weg, eine neue Anforderung kommt hinzu: nämlich, dass man - zumindest visuell - gleich hohe Spalten hat. Zu dieser Problematik gibt es aber auch andere Lösungswege.

Herzlichen Dank für Eure nette Unterstützung! :)

Zitat:

---

Zitat von tab

Idee wäre also z.B. (einfaches Beispiel, für andere Spaltenbreiten müsste man ein wenig rechnen)
#container mit padding-left und padding-right jeweils 25%, was der gewünschten Breite der Seitenspalten entspricht.
#main bleibt wie gehabt bei width:100%;
#left erhält width:50%;right:50%;
#right erhält width:50%;

---

Okay, immerhin einen Schritt weiter! Das funktioniert nun zwar tatsächlich, doch würde ich mir damit ja meine Benutzbarkeit des angelegten Responsive-Grids zerstören... :D
#left und #right müssten wohl exakt jeweils 16,66 % breit sein, weil dies genau der Breite von .grid3 entsprechen würde. Ich hätte also links und rechts je eine Breite von .grid3, weshalb noch .grid12 (= 66,66 %) für #main zur Verfügung stehen würde.

Wenn #left und #right nun plötzlich andere Breiten aufweisen, dann könnte ich ja innerhalb von #main keine Artikel mehr mit meinem Grid positionieren... ;)

Zitat:

---

Zitat von Spooky

Die Lösung von http://matthewjamestaylor.com/blog/perfect-3-column.htm...

---

Vielen Dank! Diesen Vorschlag habe ich gerade eben mal mit Firebug untersucht. Mich verwundert, dass Matthew #left und #main zunächst scheinbar als eine eine Spalte zusammengefasst hat (colmid), und daraufhin col1, col2 und col3 in colleft gepackt hat?

HTML-Code:

---

<html xml:lang="en-GB" xmlns="http://www.w3.org/1999/xhtml">
<head>
        <body>
                <div id="header">

                <div class="colmask threecol">
                        <div class="colmid">
                                <div class="colleft">

                                        <div class="col1">
                                        <div class="col2">
                                        <div class="col3">

                                </div>
                        </div>
                </div>

                <div id="footer">
        </body>
</html>

---

Wie könnte ich das denn in Contao reproduzieren? Meines Wissens kann ich die Spalten #left und #main ja nicht zu einer einzelnen zusammenfassen?

Ach ja: Weder nutze ich den Layout-Builder, noch sonstige aktivierbare Layout-Funktionen aus Contao - es soll alles von Hand geschrieben werden.

Besten Dank für Eure Unterstützung!

Viele Grüße
KloBoBBerLe

Du brauchst die Lösung von matthewjamestaylor.com nur, wenn du deine 3 Spalten visuell gleich hoch darstellen willst. Also wenn deine Spalten bspw. einen färbigen Hintergrund haben sollen und dieser Hintergrund immer mindestens so hoch dargestellt werden soll, wie die Größte der 3 Spalten. Aber selbst wenn du das brauchst, gibt es auch andere Lösungen. (Statt einem aufwendigen HTML konstrukt ist mir da mittlerweile ein simples JavaScript lieber.)

Wenn du das nicht brauchst, dann kannst du meine Lösung im von NetMediaWork verlinktem Thread nehmen. In dem Fall musst du auch nichts am HTML von Contao (also im speziellen des fe_page Templates) ändern.

Hier gibt es auch noch eine Lösung mit Flexboxen: http://philipwalton.github.io/solved...os/holy-grail/ Ist zwar mit fixen Breiten der seitlichen Spalten, aber ich denke die Flexbox Lösung funktioniert auch ohne viel Umwege mit relativen Spalten, habe es mir aber nicht im Detail angesehen. Wird halt auch nicht ohne weiteres in jedem (alten) Browser funktionieren.

Zitat:

---

Zitat von Spooky

Hier gibt es auch noch eine Lösung mit Flexboxen: http://philipwalton.github.io/solved...os/holy-grail/ Ist zwar mit fixen Breiten der seitlichen Spalten, aber ich denke die Flexbox Lösung funktioniert auch ohne viel Umwege mit relativen Spalten, habe es mir aber nicht im Detail angesehen. Wird halt auch nicht ohne weiteres in jedem (alten) Browser funktionieren.

---

Hallo,

das ist eine Lösung für die Zukunft. Leider funktioniert das nicht mit älteren IE < 11. Grad vor kurzem auf dem Schirm gehabt ...

PHP-Code:

---

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Flexbox Examples - Contao Holy Grail</title>
  <meta name="description" content="Some flexbox examples.">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">


  <style>



#wrapper, #container {
    -webkit-box-direction: normal
}

#wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

#container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

#left .inside, #right .inside {
    padding: 12px;
    background-color: #e7e7e7
}

#left {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1
}

#right {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3
}

#main {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    padding: 12px
}

@media all and (min-width:720px) {
    #container {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row
    }

    #left, #right {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 180px;
        -ms-flex: 0 0 180px;
        flex: 0 0 180px
    }

    #main {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1
    }
}

@media all and (min-width:960px) {
    #left, #right {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 240px;
        -ms-flex: 0 0 240px;
        flex: 0 0 240px
    }
}

</style>

  
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
  

</head>
<body>
  



    
    <div class="" id="wrapper">
    
    
    <header id="header">
        <div class="inside">
    
            <h1>HEADER</h1>
    
        </div>  
    </header>    
    
       
      <div class="" id="container" style="max-width: 90%; margin: 0 auto;">
      
      
        <div class="" id="main">
        <div class="inside">
        
          <h2>This is the main content</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum sequi nisi aliquam, ipsum tempore illo recusandae. Odit consectetur totam hic eius, commodi molestiae voluptates porro vel laboriosam, tempore, nostrum quis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos mollitia vero facilis, deserunt omnis, fugit quod nam, neque iusto reprehenderit tempora. Atque fuga inventore perferendis harum et culpa repudiandae, laudantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolorum ea at nobis dolores doloremque incidunt voluptate, dignissimos, veniam soluta temporibus sint error odit nesciunt ducimus excepturi quam, itaque eos! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, molestiae, delectus nemo quibusdam odit fugiat velit facilis soluta odio ipsam ullam alias repellat. Ipsam porro voluptate adipisci nihil assumenda, ab.</p>
        
        </div></div>
        
        <div class="" id="left">
        <div class="inside">        
        
          <h4>Sidebar 1</h4>
          <p>Atque fuga inventore perferendis harum et culpa repudiandae, laudantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolorum ea at nobis dolores doloremque incidunt voluptate, dignissimos, veniam soluta temporibus sint error odit nesciunt ducimus excepturi quam, itaque eos! Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        
        </div></div>
        
        <div class="" id="right">
        <div class="inside">
        
          <h4>Sidebar 2</h4>
          <p>Atque fuga inventore perferendis harum et culpa repudiandae, laudantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolorum ea at nobis dolores doloremque incidunt voluptate, dignissimos, veniam soluta temporibus sint error odit nesciunt ducimus excepturi quam, itaque eos! Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        
        </div></div>
        
        
      </div>      





    <footer class="" id="footer">
        <div class="inside">
            <h3>FOOTER</h3>
        </div>
    </footer>

</div>


</body>
</html> 


---

Jap, und leider gibt es dafür auch noch keine robusten Polyfills wie's aussieht.

Zitat:

---

Zitat von Spooky

Jap, und leider gibt es dafür auch noch keine robusten Polyfills wie's aussieht.

---

Wurde nicht weiter verfolgt, der Gedanke war bis dahin dazu Modernizer mit einzubeziehen.

War zumindest reizvoll, weil dabei #left in mobilen Ansichten über dem #main und nicht darunter geschoben wird, was manchmal eher gewünscht ist.

Vielen Dank Euch beiden! :)

Zitat:

---

Zitat von NetMediaWork

Hallo,

das ist eine Lösung für die Zukunft. Leider funktioniert das nicht mit älteren IE < 11. Grad vor kurzem auf dem Schirm gehabt ...

PHP-Code:

---

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Flexbox Examples - Contao Holy Grail</title>
  <meta name="description" content="Some flexbox examples.">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">


  <style>



#wrapper, #container {
    -webkit-box-direction: normal
}

#wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

#container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

#left .inside, #right .inside {
    padding: 12px;
    background-color: #e7e7e7
}

#left {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1
}

#right {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3
}

#main {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    padding: 12px
}

@media all and (min-width:720px) {
    #container {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row
    }

    #left, #right {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 180px;
        -ms-flex: 0 0 180px;
        flex: 0 0 180px
    }

    #main {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1
    }
}

@media all and (min-width:960px) {
    #left, #right {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 240px;
        -ms-flex: 0 0 240px;
        flex: 0 0 240px
    }
}

</style>

  
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
  

</head>
<body>
  



    
    <div class="" id="wrapper">
    
    
    <header id="header">
        <div class="inside">
    
            <h1>HEADER</h1>
    
        </div>  
    </header>    
    
       
      <div class="" id="container" style="max-width: 90%; margin: 0 auto;">
      
      
        <div class="" id="main">
        <div class="inside">
        
          <h2>This is the main content</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum sequi nisi aliquam, ipsum tempore illo recusandae. Odit consectetur totam hic eius, commodi molestiae voluptates porro vel laboriosam, tempore, nostrum quis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos mollitia vero facilis, deserunt omnis, fugit quod nam, neque iusto reprehenderit tempora. Atque fuga inventore perferendis harum et culpa repudiandae, laudantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolorum ea at nobis dolores doloremque incidunt voluptate, dignissimos, veniam soluta temporibus sint error odit nesciunt ducimus excepturi quam, itaque eos! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, molestiae, delectus nemo quibusdam odit fugiat velit facilis soluta odio ipsam ullam alias repellat. Ipsam porro voluptate adipisci nihil assumenda, ab.</p>
        
        </div></div>
        
        <div class="" id="left">
        <div class="inside">        
        
          <h4>Sidebar 1</h4>
          <p>Atque fuga inventore perferendis harum et culpa repudiandae, laudantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolorum ea at nobis dolores doloremque incidunt voluptate, dignissimos, veniam soluta temporibus sint error odit nesciunt ducimus excepturi quam, itaque eos! Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        
        </div></div>
        
        <div class="" id="right">
        <div class="inside">
        
          <h4>Sidebar 2</h4>
          <p>Atque fuga inventore perferendis harum et culpa repudiandae, laudantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolorum ea at nobis dolores doloremque incidunt voluptate, dignissimos, veniam soluta temporibus sint error odit nesciunt ducimus excepturi quam, itaque eos! Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        
        </div></div>
        
        
      </div>      





    <footer class="" id="footer">
        <div class="inside">
            <h3>FOOTER</h3>
        </div>
    </footer>

</div>


</body>
</html> 


---

---

Hervorragend, das sieht doch schon einmal klasse aus! Besten Dank! :)

Offene Fragen dazu:

• W̶̶o̶̶ ̶̶g̶̶e̶̶n̶̶a̶̶u̶̶ ̶̶w̶̶i̶̶r̶̶d̶̶ ̶̶d̶̶e̶̶n̶̶n̶̶ ̶̶d̶̶i̶̶e̶̶ ̶̶B̶̶r̶̶e̶̶i̶̶t̶̶e̶̶ ̶̶v̶̶o̶̶n̶̶ ̶̶#̶̶l̶̶e̶̶f̶̶t̶̶ ̶̶u̶̶n̶̶d̶̶ ̶̶#̶̶r̶̶i̶̶g̶̶h̶̶t̶̶ ̶̶i̶̶m̶̶ ̶̶C̶̶S̶̶S̶̶ ̶̶d̶̶e̶̶f̶̶i̶̶n̶̶i̶̶e̶̶r̶̶t̶̶?̶̶ ̶̶L̶̶e̶̶i̶̶d̶̶e̶̶r̶̶ ̶̶h̶̶a̶̶b̶̶e̶̶ ̶̶i̶̶c̶̶h̶̶ ̶̶d̶̶a̶̶ ̶̶k̶̶e̶̶i̶̶n̶̶e̶̶r̶̶l̶̶e̶̶i̶̶ ̶̶A̶̶n̶̶g̶̶a̶̶b̶̶e̶̶n̶̶ ̶̶g̶̶e̶̶f̶̶u̶̶n̶̶d̶̶e̶̶n̶̶?̶̶ Die Kommentare im CSS zu lesen hilft... :D
• Die reine HTML-Visualisierung außerhalb von Contao funktioniert natürlich prächtig. Sehe ich es richtig, dass ich zur Verwendung in Contao das Drei-Spalten-Layout im Backend deaktivieren muss, um keine vordefinierten aside-ID's mehr zu erhalten?

Viele Grüße
KloBoBBerLe

Nun möchte ich doch noch einmal nachfragen:

Wäre es denn für meinen Anwendungsfall nicht wesentlich sinngemäßer und (browserübergreifend) sicherer, wenn ich die gewünschten Spalten direkt per Grid-Layout in Form von mit Grid-Werten versehenen Artikeln erstelle?

BugBuster hat das auf seiner Seite ja ganz nett dargestellt.

Bei dieser Lösung graust es mir leider nur immens davor, auf jeder einzelnen Seite mindestens drei Artikel führen zu müssen und dementsprechend ein gigantisches Chaos zu fabrizieren... :( Gibt es denn da keine schönere Möglichkeit? Könnten die Navigations-Module nicht direkt selbst mit Grid-Klassen versehen werden, um nicht jede Spalten-Navigation als einzelnen Artikel auf jeder einzelnen Unterseite separat einfügen zu müssen?

Viele Grüße
KloBoBBerLe

Mach's dir doch nicht so schwer. Wieso machst du es nicht einfach so wie hier? http://jsfiddle.net/aqrtpps6/

// hier auf deinen Fall angewandt: http://jsfiddle.net/rove8fxr/

Auf's minimum reduziert:

PHP-Code:

---

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

#main {
    left:16.6666%;
    width:66.6666%;
}

#left {
    left:-66.6666%;
    width:16.6666%;
}

#right {
    width:16.6666%;
}

#container:after {
    clear:both;
    display:block;
    content:"";
}

@media only screen and (max-width:768px) {
     
    #main, #left, #right {
        width:auto;
        left:auto;
        float:none;
    }
} 


---

Zitat:

---

Zitat von KloBoBBerLe

]Die reine HTML-Visualisierung außerhalb von Contao funktioniert natürlich prächtig. Sehe ich es richtig, dass ich zur Verwendung in Contao das Drei-Spalten-Layout im Backend deaktivieren muss, um keine vordefinierten aside-ID's mehr zu erhalten?

---

Hallo,

das war nichts weiter als eine reine HTML-Darstellung mit den angepassten ID und Klassen aus Contao ( ohne Custom-Section). Welche Styles aus den Conto-Styles übernommen werden können bzw. in eigenen Stylesheets überschrieben werden müssten, ist dabei nicht berücksichtigt.

Aber ich würde grundsätzlich nicht die Styles aus einem Grid für das Layout übernehmen, sondern dies immer getrennt anlegen.

Zitat:

---

Zitat von Spooky

// hier auf deinen Fall angewandt: http://jsfiddle.net/rove8fxr/

---

Ganz herzlichen Dank!!! :D

Du warst schneller als ich... Gerade eben habe ich mit Deinem Beispiel auf jsfiddle rumgespielt, habe jedoch nie die volle Breite erreicht weil ich nicht an

Code:

---

float:left

---

für

Code:

---

#right

---

gedacht habe... Klasse, genau das was ich gesucht habe!
Ich habe Euch wohl mit der Holy-Grail-Anforderung ziemlich verwirrt... :o

Viele Grüße
KloBoBBerLe

Zitat:

---

Zitat von NetMediaWork

Wurde nicht weiter verfolgt, der Gedanke war bis dahin dazu Modernizer mit einzubeziehen.

War zumindest reizvoll, weil dabei #left in mobilen Ansichten über dem #main und nicht darunter geschoben wird, was manchmal eher gewünscht ist.

---

Sooo... :)

Den Abend über habe ich mich nun intensiv mit der Flexbox-Lösung auseinandergesetzt.

Das ist ja echt ein supergenialer Ansatz! Nie wieder Ärger mit Float & Co., und dazu noch gewaltige Möglichkeiten in der Positionierung! Hätte ich das nur mal bei meiner Anfrage vorgestern schon verstanden... ;)
Also ganz herzlichen Dank noch einmal für diesen Tipp! Die Browser-Kompatibilität wird mit der Zeit kommen, und den IE wird bald (hoffentlich) ohnehin kein Mensch mehr nutzen.

Viele Grüße
KloBoBBerLe