Layout Header und Footer über die gesamte Breite und 2 Spalten-Layout
Moin ich verzweifele gerade etwas.
Zuerst mal ein Link zum Problem: http://www.phonearts.de
Frage. Warum respondet das nicht, sondern schiebt sich die linke Spalte unter main?
Auf der Startseite ist alles ok, eine Spalte / Gridsystem
Auf der anderen Seite ( http://www.phonearts.de/index.php/test-2-spalten.html ) habe ich nun zusätzlich ein Zwei-Spalten-Layout.
Aktiv sind hier in Reihenfolge
CSS-Reset
Layout-Builder
Responsives Layout
12-Spalten Grid
Das CSS dazu:
Code:
#header .inside{
margin: 0 auto;
background-color: #333;
color: #fff;
max-width: 960px;
min-width: 768px;
}
#footer {
background-color: #333;
color: #fff;
width: auto;
}
#footer .inside{
margin: 0 auto;
background-color: #333;
color: #fff;
max-width: 960px;
min-width: 768px;
}
#container {
margin: 0 auto;
background-color: #fff;
color: #333;
max-width: 960px;
}
#left: {
width: 300px;
}
Grid + mehrspaltig = »Gepixelrechne«
Wenn #container ein padding-left: 0 hat, kann das nicht funktionieren. #container MUSS ein padding-left haben, das der width von #left entspricht, damit das zweispaltige Holy Grail funktionieren kann. Hier ein theoretisches Beispiel (da dein Link gerade nicht funktioniert):
#container { padding-left: 240px; }*
#left { width: 240px; right: 240px; }
Die 240px ergeben sich aus .grid3 von 220px plus 2x10px margin links und rechts.
Der Holy Grail ist ja eine "Presspackung": #left wird durch den negativen margin aus layout.css nach links gezogen, an den linken Rand von #main, und dann durch die relative Positionierung mit "right" in das linke padding von #container geschoben (siehe Teil 1, http://pmueller.de/blog/ck-2013-responsive-contao.html). Beim Grid hast du die zusätzliche Schwierigkeit, dass die verwendeten Pixelbreiten genau zu den Gridbreiten passen müssen, und zwar in *beiden* Grid-Stufen.
Die Breite von #container ist dann auch nicht mehr 960px, sondern auf blauen Dunst, rein theoretisch und ohne es probiert zu haben 960px - 240px = 720px. Jedenfalls sofern da nicht noch irgendwie ein horizontales padding oder ein horizontaler margin dazwischen funkt. Das nenne ich dann gerne "Gepixelrechne".
