Sectioning, Grouping und teilweise Flow) nehmen per Default so viel Breite ein wie möglich und so viel Höhe wie nötig. Mit Hilfe von CSS können Sie Breiten und Höhen erzwingen, sowohl zum Beschränken als auch zum Strecken. Dabei können allerdings Konfliktsituationen entstehen, die der Browser lösen muss. Etwa dann, wenn ein Inhalt eigentlich mehr Breite erfordert als angegeben, z. B. wegen einer enthaltenen Grafik, die mehr Breite benötigt. Dieses Konfliktverhalten können Sie ebenfalls beeinflussen. Insgesamt stehen CSS-Eigenschaften für Breite und Höhe (
width
und
height
), Mindestbreite und Mindesthöhe (
min-width
und
min-height
) sowie Maximalbreite und Maximalhöhe (
max-width
und
max-height
) zur Verfügung. Ferner gehört die
overflow
-Eigenschaft dazu, mit deren Hilfe sich regeln lässt, wie der Browser verfahren soll, wenn Inhalte definitiv zu groß sind für definierte Elementausmaße.
Beispiel
    

    Möglicherweise
    

    

    Möglicherweise
    

    
    Bild 14.34: Breiten, Höhen und Overflow
Erläuterung
    Die Eigenschaften
width
,
height
,
min-width
,
min-height
,
max-width
und
max-height
erwarten eine nummerische Angabe oder das Schlüsselwort
auto
(der Browser soll die geeignete Breite ermitteln).
    Im Beispiel ist zunächst zweimal eine
h1
-Überschrift mit dem Inhalt
Möglicherweise
notiert. In beiden Fällen wird eine
width
-Angabe notiert, die nicht genügend Platz bietet, um das Wort
Möglicherweise
in der großen
h1
-Schrift darzustellen. Im Normalfall wird der Browser die
width
-Angabe insofern missachten, als er das Element auf die erforderliche Breite ausdehnt, so wie in der zweiten
h1
-Überschrift des Beispiels.
    Die Eigenschaft
overflow:
hidden;
verhindert dies und sorgt dafür, dass der überbreite Inhalt einfach abgeschnitten wird. Weitere mögliche Angaben für
overflow
sind
visible
(Inhalt ragt aus dem Element so weit heraus, dass sein Inhalt auf jeden Fall komplett sichtbar ist),
scroll
(Inhalt wird abgeschnitten, wenn er die Grenzen des Elements überschreitet; der Browser sollte jedoch Scroll-Leisten anbieten, ähnlich wie bei einem eingebetteten Frame-Fenster) sowie
auto
(der Browser soll entscheiden, wie das Element im Konfliktfall angezeigt wird – möglicherweise auch durch Anbieten von Scroll-Leisten).
    Der untere Bereich im obigen Beispiel zeigt zum einen die Verwendung von
height
, um Elemente in der Höhe zu strecken, und ein typisches Zusammenspiel der Eigenschaften
width
,
min-width
und
max-width
. Die Breite wird relativ mit 50% angegeben. Einschränkend wird jedoch festgelegt, dass der Bereich mindestens 300 Pixel und maximal 800 Pixel breit sein darf. Das bedeutet: Wenn die verfügbare Breite zwischen 600 und 1.600 Pixeln liegt, wird der Bereich auf 50% davon ausgedehnt. Beträgt die verfügbare Breite dagegen nur 500 Pixel, bleibt der Anzeigebereich mindestens 300 Pixel breit und nimmt also mehr als 50% der verfügbaren Breite ein. Beträgt letztere mehr als 1.600 Pixel, bleibt der Bereich 800 Pixel breit und nimmt also weniger als 50% ein.
Referenzinformationen
    CSS-Eigenschaften
width
,
    CSS-Eigenschaften
height
:

    CSS-Eigenschaften
min-width
,
    CSS-Eigenschaften
min-height
:

    CSS-Eigenschaften
overflow
:

14.11    Positionierte Elemente
    Etwa um 1997 entstanden zwei konkurrierende Methoden, Elemente aus dem normalen Textfluss herauszunehmen und unabhängig davon im Anzeigefenster zu positionieren. Die eine war rein HTML-basiert, stammte von Netscape und wurde unter dem Schlagwort Layer-Technik bekannt. Die andere stammte von Microsoft und verwendete CSS. Letztere wurde schließlich vom W3-Konsortium übernommen. Seit der CSS-Version 2.0 besteht die Möglichkeit, HTML-Elemente exakt im Anzeigefenster des WWW-Browsers zu positionieren. Aus dem Elementfluss herausgelöste Elemente haben durchaus Vorteile. So können Sie beispielsweise im HTML-Dokument zuerst den