HTML/CSS - Floaten - Das Fazit
1. Die Abschnitte
- Grundlagen
- Das Grundprinzip
- Ein einfaches Beispiel
- Ein kompliziertes Beispiel
- Eine elegante Lösung
- Gleiche Höhen
2. Die Daten
Jetzt geht es an die gleiche_hoehe.htm. Im Gegensatz zu den vorherigen Abschnitten hat sich im Code aber eine ganze Menge
getan. So ist die Reihenfolge der <div>-Elemente wieder links, mitte, rechts.
Hinzu gekommen ist ein weiteres <div>, das den Klassennamen container bekommen hat und leider mal wieder
für den Internet Explorer 6/7 benötigt wird.
3. Das Ziel
Wie ihr bis jetzt ja schon gesehen habt, ergibt sich die Höhe eines Elementes erst mal aus dem Inhalt. Das konntet ihr in den letzten beiden Abschnitten schön sehen. Aber! Vielleicht habt ihr schon mit "Kreativen" zu tun gehabt oder seid möglicherweise selber einer. In dem Fall muss man damit rechnen, dass die ungleichen Höhen stören. Darum wollen wir das jetzt bei der linken und rechten Spalte entsprechend korrigieren. Zumindest dass es so aussieht, als ob sie gleich hoch sind.
Ein Hinweis
Die Lösung, die ich euch jetzt zeige, ist nur eine von mehreren. Ich mache das aber deshalb, um euch mal mit ein paar Möglichkeiten zu konfrontieren.
4. Die Hintergründe
Wer jetzt denkt, dass wir mit background arbeiten, der täuscht sich. Nein, wir nehmen border. Warum werdet
ihr später sehen. Also ergänzen wir den CSS-Code um den folgenden Eintrag.
div.container
{
border-right: 150px solid #dadada;
border-left: 150px solid #c4c4c4;
}
Wichtig!
Achtet darauf, dass sich die Angaben nur auf die linke und rechte Border beziehen. Wenn jemand meint, dass anders zu machen, der wird sich wundern. Probiert mal folgenden Code aus, dann seht ihr es.
div.container
{
border: solid 150px;
border-right-color: #dadada;
border-left-color: #c4c4c4;
}
5. Die linke und rechte Spalte
Dafür benötigen wir nur eine kleine Ergänzung beim div.links beziehungsweise div.rechts und die sehen so aus.
div.links
{
...
margin-left: -150px;
position: relative;
}
div.rechts
{
...
margin-right: -150px;
position: relative;
}
Erläuterung
Mit margin-left/margin.right: -150px; reduzieren wir den linken und rechten Aussenabstand um denselben Wert, den die
entsprechende Border hat. Und das position: relative; benötigen wir für den Internet Explorer 6/7. Da das aber keine
Auswirkungen auf andere Browser hat, können wir hier getrost auf einen Hack verzichten.
6. Die mittlere Spalte
Eigentlich sieht das ja schon ganz gut aus. Nur im Internet Explorer 6 passt die rechte Spalte noch nicht ganz zum "Hintergrund". Dafür benötigen wir aber zwei zusätzliche Anweisungen. Und zwar folgende.
div.mitte
{
...
width: 100%;
position: relative;
}
Da sich auch hier die anderen Browser daran nicht stören, kann man ebenfalls auf einen Hack verzichten. Et voilá und fertig. Ach ja, das
Ganze funktioniert auch, wenn ihr einem der drei <div>-Elemente zusätzlichen Inhalt verpasst.
7. Fazit
Wer jetzt auf die Idee kommt, der linken und rechten Spalte noch eine Border zu verpassen, der wird sich wundern. Probiert es aus. Dann versteht ihr es. Ansonsten hoffe ich, dass ihr mit dieser Einführung in das Floaten klar gekommen seid und die grundsätzlichen Prinzipien verstanden habt. Denn dieses Wissen werdet ihr bei den nächsten Tutorials auf jeden Fall benötigen.