PROFI-FOTOS-online.com - Der eigene Online-Shop für Profi-Fotografen - Einfach. Günstig. Fair.

CSS-Eigenschaft: max-width, Kategorien: Ausmaße (Höhen und Breiten) (allgemein), Visual formatting model details (CSS 2.1), Basic Box Model (CSS 3)

Maximalbreite

Bestimmt die maximale Breite eines Block-Elements.

CSS-Eigenschaft: max-width
KurzbeschreibungWerteStandardwertKategorieHinweis
Maximalbreite
  • <length>
  • <percentage>
  • none
  • inherit
none
Allgemein:
Ausmaße (Höhen und Breiten)
CSS 2.1:
Visual formatting model details
CSS 3:
Basic Box Model
 

Verwandte Eigenschaften aus der Kategorie: Ausmaße (Höhen und Breiten) (allgemein), Visual formatting model details (CSS 2.1), Basic Box Model (CSS 3):

Folgendes ist beim Einsatz von max-width zu beachten:

  • max-width verhält sich anders als max-height. Im Gegensatz zu der maximalen Höhe richtet sich die maximale Breite nicht nach der Menge des Inhalts. Block-Elemente nehmen ohne weitere Angaben eine Breite von 100% ein, die max-width beschränkt das Block-Element, insofern diese geringer ist als die zur Verfügung stehenden 100%.
  • Zuviel Inhalt dehnt Block-Elemente nicht in der Breite, sondern in der Höhe aus. Ist die Höhe über eine height oder max-heigt begrenzt, überfließt der Inhalt die Box nach unten, nicht zur Seite.
  • Ein overflow mit dem Wert auto oder scroll verhindert, dass Inhalt über die Box hinausragt. Hier wird ein Scrollbalken aber erst mal nur zum Scrollen nach unten angezeigt.
  • Erst wenn innerhalb des HTML-Elements, welches eine maximale Breite hat, ein weiteres Block-Element ist, dessen Breite breiter als die definierte Angabe in max-width ist, greift die maximale Breite.
    Im Beispiel Nr. 6 ist diese Konstellation zu beobachten. Die innere Box hat eine höhere Breite als die max-width des umgebenden HTML-Elements. Der innere Block läuft dadurch über die Breite des äußeren Blocks hinaus und überlagert andere Teile der Webseite. Erst in der Kombination mit einem overflow: auto wird ein horizontaler Scrollbalken erzeugt.
  • Ist die max-width höher als die zur Verfügung stehende Breite, wie im Beispiel Nr. 9 zu sehen, passiert nichts. Die Breite wird auf "natürliche" Weise durch das umgebende DIV begrenzt.
  • Horizontale Scrollbalken sollten vermieden werden. Sie stören schnell das Layout, vor allem verschlechtern sie die Bedienbarkeit einer Webseite, und dies im wesentlich höheren Maß, als dies vertikale Scrollbalken tun.
  • Der Internet Explorer 6 unterstützt max-width nicht.
  • Eine Angabe in % bezieht sich auf das umgebende Box-Element.
Browserunterstützung von max-width
Firefox
Firefox		Google Chrome
Google
Chrome		Internet Explorer
Internet
Explorer		Safari
Safari		Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu max-width:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    max-height


Beispiele

HTML:

<div>Zwei Worte.</div>

CSS:

div {
   max-width: 250px;
   border: 1px solid black;
}
/* Diese Einstellung von max-width greift auf alle weiteren Beispiele.
Die max-width richtet sich nicht nach der Menge des Inhaltes, sondern beschränkt die Box in der "natürlichen" Breite. Ohne Angabe würde sie 100% der Beispielvorschau einnehmen. */

Beispiel Nr. 1 So sieht's aus:

Zwei Worte.
 

HTML:

<div>Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</div>

CSS:

/* Mehr Inhalt führt dazu, dass sich dieser nach unten ausdehnt. Die max-width greift hier, es kommt aber zu keinen Überlagerungen oder Scroll-Effekten. */

Beispiel Nr. 2 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.
 

HTML:

<div>Jeder vielleicht  nicht, aber so mancher, der eine Webseite gebaut hat, stand schon vor der Frage, wie sieht das denn mit Text aus. Entweder hat man zu dem Zeitpunkt keine Lust, einen sinnvollen Text zu schreiben, oder man weiß, dass man die Texte ohnehin geliefert bekommt. Nun, das hilft einem in dem Moment aber nicht weiter. Das beliebteste ist von daher ein Lorem ipsum Text. Es gibt sogar ein Add-On für den Firefox, mit dem man sich Lorem ipsum-, aber auch alternative Fülltexte generieren lassen kann. Aber ehrlich, nach zehn Jahren Webdesign können Sie Lorem ipsum nicht mehr sehen! Ganz davon ab, ich habe es schon erlebt, dass eine Redaktion eine Webseite nicht absegnen konnte, weil dort Blindtext wie der bereits erwähnte zu finden war, und man sich es nicht vorstellen konnte, wie das nun mit einem richtigem Text in deutscher Sprache aussieht. Nun, in der Tat ist es so, dass man durch Lorem ipsum wirklich irritiert ist, wohingegen der unsinnigste Text, egal was drin steht, eine bessere Vorstellungskraft mit sich bringt, wenn es nur irgendwie wechselnde Worte in irgendeinem vermeintlichen sinnvollen Zusammenhang zu finden sind.</div>

CSS:

/* Auch viel Inhalt dehnt sich nach unten aus ;-) , die max-width greift hier ebenfalls, keine unerwünschten Effekte */

Beispiel Nr. 3 So sieht's aus:

Jeder vielleicht nicht, aber so mancher, der eine Webseite gebaut hat, stand schon vor der Frage, wie sieht das denn mit Text aus. Entweder hat man zu dem Zeitpunkt keine Lust, einen sinnvollen Text zu schreiben, oder man weiß, dass man die Texte ohnehin geliefert bekommt. Nun, das hilft einem in dem Moment aber nicht weiter. Das beliebteste ist von daher ein Lorem ipsum Text. Es gibt sogar ein Add-On für den Firefox, mit dem man sich Lorem ipsum-, aber auch alternative Fülltexte generieren lassen kann. Aber ehrlich, nach zehn Jahren Webdesign können Sie Lorem ipsum nicht mehr sehen! Ganz davon ab, ich habe es schon erlebt, dass eine Redaktion eine Webseite nicht absegnen konnte, weil dort Blindtext wie der bereits erwähnte zu finden war, und man sich es nicht vorstellen konnte, wie das nun mit einem richtigem Text in deutscher Sprache aussieht. Nun, in der Tat ist es so, dass man durch Lorem ipsum wirklich irritiert ist, wohingegen der unsinnigste Text, egal was drin steht, eine bessere Vorstellungskraft mit sich bringt, wenn es nur irgendwie wechselnde Worte in irgendeinem vermeintlichen sinnvollen Zusammenhang zu finden sind.
 

HTML:

<div class="doHeight">Jeder vielleicht  nicht, aber so mancher, der eine Webseite gebaut hat, stand schon vor der Frage, wie sieht das denn mit Text aus. Entweder hat man zu dem Zeitpunkt keine Lust, einen sinnvollen Text zu schreiben, oder man weiß, dass man die Texte ohnehin geliefert bekommt. Nun, das hilft einem in dem Moment aber nicht weiter. Das beliebteste ist von daher ein Lorem ipsum Text. Es gibt sogar ein Add-On für den Firefox, mit dem man sich Lorem ipsum-, aber auch alternative Fülltexte generieren lassen kann. Aber ehrlich, nach zehn Jahren Webdesign können Sie Lorem ipsum nicht mehr sehen! Ganz davon ab, ich habe es schon erlebt, dass eine Redaktion eine Webseite nicht absegnen konnte, weil dort Blindtext wie der bereits erwähnte zu finden war, und man sich es nicht vorstellen konnte, wie das nun mit einem richtigem Text in deutscher Sprache aussieht. Nun, in der Tat ist es so, dass man durch Lorem ipsum wirklich irritiert ist, wohingegen der unsinnigste Text, egal was drin steht, eine bessere Vorstellungskraft mit sich bringt, wenn es nur irgendwie wechselnde Worte in irgendeinem vermeintlichen sinnvollen Zusammenhang zu finden sind.</div>

CSS:

div.doHeight {
   height: 300px;
}
/* Erst bei einer definierten Höhe kommt es zu unerwünschten Effekten. Inhalt ragt über die Box hinaus, max-width wirkt hier aber stabil, die Überlagerung findet nach unten statt. */

Beispiel Nr. 4 So sieht's aus:

Jeder vielleicht nicht, aber so mancher, der eine Webseite gebaut hat, stand schon vor der Frage, wie sieht das denn mit Text aus. Entweder hat man zu dem Zeitpunkt keine Lust, einen sinnvollen Text zu schreiben, oder man weiß, dass man die Texte ohnehin geliefert bekommt. Nun, das hilft einem in dem Moment aber nicht weiter. Das beliebteste ist von daher ein Lorem ipsum Text. Es gibt sogar ein Add-On für den Firefox, mit dem man sich Lorem ipsum-, aber auch alternative Fülltexte generieren lassen kann. Aber ehrlich, nach zehn Jahren Webdesign können Sie Lorem ipsum nicht mehr sehen! Ganz davon ab, ich habe es schon erlebt, dass eine Redaktion eine Webseite nicht absegnen konnte, weil dort Blindtext wie der bereits erwähnte zu finden war, und man sich es nicht vorstellen konnte, wie das nun mit einem richtigem Text in deutscher Sprache aussieht. Nun, in der Tat ist es so, dass man durch Lorem ipsum wirklich irritiert ist, wohingegen der unsinnigste Text, egal was drin steht, eine bessere Vorstellungskraft mit sich bringt, wenn es nur irgendwie wechselnde Worte in irgendeinem vermeintlichen sinnvollen Zusammenhang zu finden sind.
 

HTML:

<div class="doHeight doOverflow">Jeder vielleicht  nicht, aber so mancher, der eine Webseite gebaut hat, stand schon vor der Frage, wie sieht das denn mit Text aus. Entweder hat man zu dem Zeitpunkt keine Lust, einen sinnvollen Text zu schreiben, oder man weiß, dass man die Texte ohnehin geliefert bekommt. Nun, das hilft einem in dem Moment aber nicht weiter. Das beliebteste ist von daher ein Lorem ipsum Text. Es gibt sogar ein Add-On für den Firefox, mit dem man sich Lorem ipsum-, aber auch alternative Fülltexte generieren lassen kann. Aber ehrlich, nach zehn Jahren Webdesign können Sie Lorem ipsum nicht mehr sehen! Ganz davon ab, ich habe es schon erlebt, dass eine Redaktion eine Webseite nicht absegnen konnte, weil dort Blindtext wie der bereits erwähnte zu finden war, und man sich es nicht vorstellen konnte, wie das nun mit einem richtigem Text in deutscher Sprache aussieht. Nun, in der Tat ist es so, dass man durch Lorem ipsum wirklich irritiert ist, wohingegen der unsinnigste Text, egal was drin steht, eine bessere Vorstellungskraft mit sich bringt, wenn es nur irgendwie wechselnde Worte in irgendeinem vermeintlichen sinnvollen Zusammenhang zu finden sind.</div>

CSS:

div.doOverflow {
   overflow: auto;
}
/* Ein overflow: auto verhindert Textüberlagerungen. Allerdings bleibt die primäre Ausdehnungsrichtung die Höhe.  */

Beispiel Nr. 5 So sieht's aus:

Jeder vielleicht nicht, aber so mancher, der eine Webseite gebaut hat, stand schon vor der Frage, wie sieht das denn mit Text aus. Entweder hat man zu dem Zeitpunkt keine Lust, einen sinnvollen Text zu schreiben, oder man weiß, dass man die Texte ohnehin geliefert bekommt. Nun, das hilft einem in dem Moment aber nicht weiter. Das beliebteste ist von daher ein Lorem ipsum Text. Es gibt sogar ein Add-On für den Firefox, mit dem man sich Lorem ipsum-, aber auch alternative Fülltexte generieren lassen kann. Aber ehrlich, nach zehn Jahren Webdesign können Sie Lorem ipsum nicht mehr sehen! Ganz davon ab, ich habe es schon erlebt, dass eine Redaktion eine Webseite nicht absegnen konnte, weil dort Blindtext wie der bereits erwähnte zu finden war, und man sich es nicht vorstellen konnte, wie das nun mit einem richtigem Text in deutscher Sprache aussieht. Nun, in der Tat ist es so, dass man durch Lorem ipsum wirklich irritiert ist, wohingegen der unsinnigste Text, egal was drin steht, eine bessere Vorstellungskraft mit sich bringt, wenn es nur irgendwie wechselnde Worte in irgendeinem vermeintlichen sinnvollen Zusammenhang zu finden sind.
 

HTML:

<div class="doInner"><p>Jeder vielleicht  nicht, aber so mancher, der eine Webseite gebaut hat, stand schon vor der Frage, wie sieht das denn mit Text aus. Entweder hat man zu dem Zeitpunkt keine Lust, einen sinnvollen Text zu schreiben, oder man weiß, dass man die Texte ohnehin geliefert bekommt. Nun, das hilft einem in dem Moment aber nicht weiter. Das beliebteste ist von daher ein Lorem ipsum Text. Es gibt sogar ein Add-On für den Firefox, mit dem man sich Lorem ipsum-, aber auch alternative Fülltexte generieren lassen kann. Aber ehrlich, nach zehn Jahren Webdesign können Sie Lorem ipsum nicht mehr sehen! Ganz davon ab, ich habe es schon erlebt, dass eine Redaktion eine Webseite nicht absegnen konnte, weil dort Blindtext wie der bereits erwähnte zu finden war, und man sich es nicht vorstellen konnte, wie das nun mit einem richtigem Text in deutscher Sprache aussieht. Nun, in der Tat ist es so, dass man durch Lorem ipsum wirklich irritiert ist, wohingegen der unsinnigste Text, egal was drin steht, eine bessere Vorstellungskraft mit sich bringt, wenn es nur irgendwie wechselnde Worte in irgendeinem vermeintlichen sinnvollen Zusammenhang zu finden sind.</p></div>

CSS:

div.doInner p {
   width: 500px;
   border: 3px solid red;
}
/* Erst wenn innerhalb eines HTML-Elements mit max-width ein breiteres Element liegt, kommt es zu unerwünschten Überlagerungen, dann aber in der Horizontalen. */

Beispiel Nr. 6 So sieht's aus:

Jeder vielleicht nicht, aber so mancher, der eine Webseite gebaut hat, stand schon vor der Frage, wie sieht das denn mit Text aus. Entweder hat man zu dem Zeitpunkt keine Lust, einen sinnvollen Text zu schreiben, oder man weiß, dass man die Texte ohnehin geliefert bekommt. Nun, das hilft einem in dem Moment aber nicht weiter. Das beliebteste ist von daher ein Lorem ipsum Text. Es gibt sogar ein Add-On für den Firefox, mit dem man sich Lorem ipsum-, aber auch alternative Fülltexte generieren lassen kann. Aber ehrlich, nach zehn Jahren Webdesign können Sie Lorem ipsum nicht mehr sehen! Ganz davon ab, ich habe es schon erlebt, dass eine Redaktion eine Webseite nicht absegnen konnte, weil dort Blindtext wie der bereits erwähnte zu finden war, und man sich es nicht vorstellen konnte, wie das nun mit einem richtigem Text in deutscher Sprache aussieht. Nun, in der Tat ist es so, dass man durch Lorem ipsum wirklich irritiert ist, wohingegen der unsinnigste Text, egal was drin steht, eine bessere Vorstellungskraft mit sich bringt, wenn es nur irgendwie wechselnde Worte in irgendeinem vermeintlichen sinnvollen Zusammenhang zu finden sind.

 

HTML:

<div class="doInner doOverflow">
   <p>Jeder vielleicht  nicht, aber so mancher, der eine Webseite gebaut hat, stand schon vor der Frage, wie sieht das denn mit Text aus. Entweder hat man zu dem Zeitpunkt keine Lust, einen sinnvollen Text zu schreiben, oder man weiß, dass man die Texte ohnehin geliefert bekommt. Nun, das hilft einem in dem Moment aber nicht weiter. Das beliebteste ist von daher ein Lorem ipsum Text. Es gibt sogar ein Add-On für den Firefox, mit dem man sich Lorem ipsum-, aber auch alternative Fülltexte generieren lassen kann. Aber ehrlich, nach zehn Jahren Webdesign können Sie Lorem ipsum nicht mehr sehen! Ganz davon ab, ich habe es schon erlebt, dass eine Redaktion eine Webseite nicht absegnen konnte, weil dort Blindtext wie der bereits erwähnte zu finden war, und man sich es nicht vorstellen konnte, wie das nun mit einem richtigem Text in deutscher Sprache aussieht. Nun, in der Tat ist es so, dass man durch Lorem ipsum wirklich irritiert ist, wohingegen der unsinnigste Text, egal was drin steht, eine bessere Vorstellungskraft mit sich bringt, wenn es nur irgendwie wechselnde Worte in irgendeinem vermeintlichen sinnvollen Zusammenhang zu finden sind.</p>
</div>

CSS:

/* Ein overflow: auto in der Kombination mit dem HTML wie im Beispiel Nr. 6 führt dazu, dass die primäre Ausdehnungsrichtung horizontal ist. */

Beispiel Nr. 7 So sieht's aus:

Jeder vielleicht nicht, aber so mancher, der eine Webseite gebaut hat, stand schon vor der Frage, wie sieht das denn mit Text aus. Entweder hat man zu dem Zeitpunkt keine Lust, einen sinnvollen Text zu schreiben, oder man weiß, dass man die Texte ohnehin geliefert bekommt. Nun, das hilft einem in dem Moment aber nicht weiter. Das beliebteste ist von daher ein Lorem ipsum Text. Es gibt sogar ein Add-On für den Firefox, mit dem man sich Lorem ipsum-, aber auch alternative Fülltexte generieren lassen kann. Aber ehrlich, nach zehn Jahren Webdesign können Sie Lorem ipsum nicht mehr sehen! Ganz davon ab, ich habe es schon erlebt, dass eine Redaktion eine Webseite nicht absegnen konnte, weil dort Blindtext wie der bereits erwähnte zu finden war, und man sich es nicht vorstellen konnte, wie das nun mit einem richtigem Text in deutscher Sprache aussieht. Nun, in der Tat ist es so, dass man durch Lorem ipsum wirklich irritiert ist, wohingegen der unsinnigste Text, egal was drin steht, eine bessere Vorstellungskraft mit sich bringt, wenn es nur irgendwie wechselnde Worte in irgendeinem vermeintlichen sinnvollen Zusammenhang zu finden sind.

 

HTML:

<div class="doMaxVal">Jeder vielleicht  nicht, aber so mancher, der eine Webseite gebaut hat, stand schon vor der Frage, wie sieht das denn mit Text aus. Entweder hat man zu dem Zeitpunkt keine Lust, einen sinnvollen Text zu schreiben, oder man weiß, dass man die Texte ohnehin geliefert bekommt. Nun, das hilft einem in dem Moment aber nicht weiter. Das beliebteste ist von daher ein Lorem ipsum Text. Es gibt sogar ein Add-On für den Firefox, mit dem man sich Lorem ipsum-, aber auch alternative Fülltexte generieren lassen kann. Aber ehrlich, nach zehn Jahren Webdesign können Sie Lorem ipsum nicht mehr sehen!</div>

CSS:

div.doMaxVal {
   max-width: 1000px;
}
/* Ist die maximale Breite größer als der verfügbare Platz, wird die Breite durch das umgebene DIV, nicht durch das max-width bestimmt. */

Beispiel Nr. 8 So sieht's aus:

Jeder vielleicht nicht, aber so mancher, der eine Webseite gebaut hat, stand schon vor der Frage, wie sieht das denn mit Text aus. Entweder hat man zu dem Zeitpunkt keine Lust, einen sinnvollen Text zu schreiben, oder man weiß, dass man die Texte ohnehin geliefert bekommt. Nun, das hilft einem in dem Moment aber nicht weiter. Das beliebteste ist von daher ein Lorem ipsum Text. Es gibt sogar ein Add-On für den Firefox, mit dem man sich Lorem ipsum-, aber auch alternative Fülltexte generieren lassen kann. Aber ehrlich, nach zehn Jahren Webdesign können Sie Lorem ipsum nicht mehr sehen!
 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 17. 01. 2024
Render Time: 0.036 sec.