Min-width-Lösung für den Internet Explorer mit purem CSS - von Stu Nicholls

raster Wie schon im Artikel IE6 min-width/max-width Hack von Cameron Moll beschrieben, unterstützt der Internet Explorer die CSS-Eigenschaft min-width nicht, mit der man die minimale Breite eines Elementes angeben kann.

Lösungen gibt es in Form von JavaScript und CSS-Expressions.

Stu Nicholls hat für das Problem eine Lösung entwickelt, die auf reinem CSS basiert und auf seiner CSS-Play -Webseite zu finden ist unter: Min-Width for Internet Explorer.

Die Lösung ist zwar nicht ganz neu, ich möchte sie hier aber trotzdem nochmal in der deutschen Übersetzung darstellen.

Zuerst einmal sind hier die funktionsfähigen Versionen für

Die notwendigen HTML- und CSS-Definitionen lassen sich direkt dem Quelltext der jeweiligen Seiten entnehmen.

Wie funktioniert das Ganze?

Methode 1: IE im Quirks Mode

Diese Methode basiert auf dem InternetExplorer im Quirks-Mode und nutzt das fehlerhafte Box Modell, um den richtigen Effekt zu bekommen.

Es werden zwei div-Elemente verwendet:
ein äußeres <div>, das die prozentuale Breite UND die Minimum-Breite kontrolliert
und ein inneres <div>, das den Inhalt enthält.

ÄUSSERES DIV

Das äußere <div>-Element hat eine Breite, die der prozentualen Breite entspricht und einen rechten (oder linken) Rahmen (border), der der minimalen Breite entspricht.

INNERES DIV

Das innere <div>-Element hat eine Breite von 100% bezogen auf das äußere <div>-Element UND ein negatives rechtes (oder linkes) Margin, das der minimalen Breite entspricht.

Damit nimmt es die ganze prozentuale Breite des äußeren <div>-Elementes ein.

Wenn das Browserfenster verkleinert wird, reduziert sich die prozentuale Breite des äußeren <div>-Elements so lange bis nur noch der Rahmen, der der minimalen Breite entspricht, übrig bleibt.

Das innere <div>-Element verringert ebenfalls seine Größe und hört gleichzeitig mit dem äußeren <div>-Element dann auf zu schrumpfen, wenn nur noch dessen Rahmen “übrig” ist.
An diesem Punkt entspricht der Rahmen des äußeren <div>-Elementes der minimale Breite des inneren <div>-Elementes.

Eigentlich ganz leicht :)

Methode 2: IE im Standard-Mode

Diese Methode ist identisch mit der oben beschriebenen. Sie benötigt lediglich zusätzlich einen alles umschließenden Container mit einer Breite (width) von 90%.

Das äußere <div>-Element braucht dann nur eine Rahmenbreite (border). Seine vollständige Breite erstreckt sich automatisch auf den alles umschließenden Container (90%).

Kommentare & Trackbacks

Kommentar von Kai Laborenz:

Naja - leichter als solche verschachtelten DIV-Konstruktionen wäre es, einfach ein HR in das einzige DIV zu packen und diesem die entsprechende Breite mitzugeben. Gegenüber dem letzten Beispiel sparen wir ein komplettes DIV und ein “halbes”-Tag.

26. August 2006 um 22:50
Pingback: min-width - TP Hilfe Forum:

[…] Das ganze ist nur kein CC, sondern ein child-selector-hack Sonst gibt es da noch das und das zu lesen __________________ Gru� Mark Mein Blog zum TP || How to use a forum || How to use GOOGLE || PS Kniffe webcreate IT SOLUTIONS http://www.webcreate-nrw.de […]

15. August 2007 um 14:07