Ich fand' den Holy Grail auch schon immer seltsam, aber anders bekommt man es einfach nicht hin, wenn man alle der folgenden Dinge haben will:- #main vor #left und #right im DOM
- fluid-width #main, mit fixed width #left und #right
- footer soll nach unten geschoben werden, egal ob #main, #left oder #right den meisten content hat
Braucht man Punkt 1 nicht, könnte man auch folgenden DOM bauen
PHP-Code:
<div id="wrapper">
<header></header>
<aside id="left"></aside>
<aside id="right"></aside>
<section id="main"></section>
<footer></footer>
</div>
und dann kommt man schon mit einer CSS Lösung aus, die mehr straight-forward ist:
PHP-Code:
#main {
margin:0 200px;
}
#left {
float:left;
width:200px;
}
#right {
float:right;
width:200px;
}
Braucht man nur Punkt 2 nicht (mit ursprünglichen DOM #main for #left und #right):
PHP-Code:
#main {
float:left;
position:relative;
left:200px;
width:580px;
}
#left {
float:left;
position:relative;
left:-580px;
width:200px;
}
#right {
float:left;
width:200px;
}
Braucht man nur Punkt 3 nicht:
PHP-Code:
#main {
margin:0 200px;
}
#left {
position:absolute;
left:0;
top:100px; /* header height, or use additional container */
width:200px;
}
#right {
position:absolute;
right:0;
top:100px; /* header height, or use additional container */
width:200px;
}
Warum bildet Contao einen dirty DOM?
Zitieren
Zitat von jr1337
Lesezeichen