Floats aufheben (II)
Autor: Alex
Wenn man mit Floats arbeitet, wobei man bei Layouts nur schwer drumherum kommt, ist einem sicher schon das folgende Problem begegnet: das alles umgebende div wird vom inneren gefloateten div nicht auseinander gepreßt. Das gefloatete div hängt wie ein Fahne aus dem “statischen” div (Elternelement) heraus. Bis jetzt ist die gängige Weise floats aufzuheben und das “statische” div auf entsprechende Länge zu bringen die, ein div oder ein br mit dem Attribut: clar:both folgen zu lassen.
Vor einigen Wochen kam eine neue Methode heraus, das geschilderte Problem ohne zusätzliches Markup zu lösen. Dabei erhält das “statische” div ein overflow:auto und legt sich so um das gefloatete div drum herum.
Damit das Ganze auch im IE funktioniert ist ein kleiner Hack notwendig (siehe unten).
Für Opera 7.54 muß das “statische” div ein width erhalten, sonst funktioniert es dort nicht. Der gesamte Aufbau des Codes sieht beispielsweise so aus:
div#site
{
overflow: auto;
background-color: grey;
width:100%;
}
div#related
{
float: left;
width: 10em;
background-color: red;
}
/* Hack fuer IE */
/* */
* html div#site
{
height: 1%;
overflow: visible;
}
/* */
Den Code habe ich von reiermeister.de übernommen und um die Opera Lösung erweitert.
ACHTUNG: in den Hack für den IE kommt in der ersten Zeile noch ein Backslash hinein. Leider konnte ich diesen hier nicht einfügen, da er geparst wird. Bitte guck euch das bei reiermeister genau an.
Insgesamt sieht das Konstrukt erstmal recht aufwendig aus. Ist es aber nicht. Mit ein bischen Übung ist dies eine sehr saubere Lösung.
CSS Tips
| 12.04.05 |Weitere neue Artikel
Neue TXP Sites
- Unable to connect to del.icio.us
