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:
<style type="text/css">
/* <![CDATA[ */
html, body {
margin: 0;
padding: 0;
background-image: url(images/bg2000-prozent12.png);
background-position: 12% 0%;
background-repeat: repeat-y;
}
#kopfbereich {
background-color: #760000;
}
#boxen {
height: 100%;
}
#boxen_innen {
/*für padding-left und padding-right*/
}
#box1 {
float: left;
width:12%;
}
#box2 {
float: left;
width:87.9%;
}
h1 {
margin:0;
}
p {
margin:0;
}
/* ]]> */
</style>
...
...
<div id="kopfbereich">
<h1>Zweispalter</h1>
<p>Durchgehender Zweispalter mit background für body</p>
</div>
<div id="boxen">
<div id="boxen_innen">
<div id="box1">
box1
</div>
<div id="box2">
box2
</div>
</div>
</div>
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%;
}
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.
