Mal zurück zum Beispielcode @believe_me.
#content wird nicht gefloatet. Da können nachfolgende Elemente floaten wie sie wollen. #content erzeugt als Blockelement einen Zeilenumbruch.
Die Linke "Spalte wird also unter #content angezeigt.
Ein Beispiel (Zweispalter mit durchgehenden Spalten):
[code]
/* */
…
…
Zweispalter
Durchgehender Zweispalter mit background für body
[/code]Das background-image ist 2000px breit und hat auf der linken einen 240px breiten, eingefärbten bereich. Also 12% von 2000.
Mit background-position wird die Grafik entsprechend ausgerichtet (faux columns).
Das background-image füllt so den gesamten wievpoint.
Der Kopfbereich überdeckt die Hintergrundgrafik mit einer eigenen background-color.
Zu height: 100%;
Floats können keine height: werte% vom Elternelement als Bezug verwenden. Warum das auch ohne floats nicht geht habe ich bereits beschrieben.
Es ist aber möglich die Floatenden Boxen in einem Element einzuschließen und Diesem height: 100% zu geben:
[code]
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#kopfbereich {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 8em;
background-color: #760000;
}
#boxen {
min-height: 100%;
background-image: url(images/bg2000-prozent12.png);
background-position: 12% 0%;
background-repeat: repeat-y;
background-color: #B0B0B0;
}
/kein min-height für IE6/
- html #boxen {
height: 100%;
}
#boxen_innen {
padding-top: 8em;
}
#box1 {
float: left;
width:12%;
}
#box2 {
float: left;
width:87.9%;
}
[/code]Ob #kopfbereich im html vor oder nach #boxen notiert wird ist Wurst.
Er wird absolute vom wievpoint ausgerichtet.
Platz für den Kopfbereich schafft #boxen_innen mit padding-top.
Zum Layout:
width 11,5% ist meiner Meinung nach viel zu wenig.
Die gesamte Seite bräuchte ein sehr großes min-width um Formulare darin unterzubringen.
Außerdem sieht es wirklich nicht gut aus.
Der Vorschlag aus einem anderen Forum (Crosspost) arbeitet mit position: absolute für eine ganze Spalte.
Überlege selbst welchen Weg du gehen möchtest. Du hast nun drei Varianten zur Auswahl.