Keywords

Hybrides Layout

Kombiniert man Elastic Layouts und Liquid Layouts, wird dies "Elastic-Liquid Hybrid" genannt: Dabei skaliert das Layout bis zu einem bestimmten Prozentwert entsprechend der Textgröße, darüber hinaus aber nicht mehr (Angaben für das Hybrid-Layout in Fett):

body {
    text-align: center;
    font-size: 62.5%;
    max-width: 98%;
}
#wrapper {
    width: 70em;
    max-width: 98%;
    margin: 0 auto;
    text-align: left;
}
#content {
    width: 52em;
    max-width: 75%;
    float: right;
}
#main {
    float: left;
    width: 32em;
    max-width: 66%;
}
#other {
    float: right;
    width: 18em;
    max-width: 32%;
}
#nav {
    width: 18em;
    max-width: 23%;
    float: left;
}
#footer {
    clear: both;
}

Diese Layoutart funktioniert nur in Browsern zufriedenstellend, die die CSS-Eigenschaft max-width beherrschen. Dafür wird hier das Layout gewiss nie größer als das verfügbare Browserfenster (IE > 6, Mozilla Firefox, Opera >=6, Netscape >= 6).

Dreispaltiges Hybrid-Layout

Module, die für die Durchführung vorausgesetzt werden