Die Antwort: eigentlich gar nicht! Für die Lösung muss getrickst werden.

Einen Weg zeigt der Artikel Faux Columns von Dan Cederholm bei A List Apart.

byteshift, eine Webdesign-Agentur aus Berlin hat den Artikel ins Deutsche übersetzt:

Er ist hier unter dem Titel “Unechte Spalten” zu finden »

Eine genaue Auflistung der Änderungen finden sich im YAML-Changelog.

Übrigens: Dirk Jesse schreibt gerade an dem Buch »CSS-Layouts – Praxislösungen mit YAML«, das bald im Galileo-Verlag erscheinen und den Umgang mit YAML ausführlich dokumentieren wird.

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

1. InternetExplorer im QUIRKS-Mode – linksbündiges Layout
2. InternetExplorer im STANDARD-Mode – linksbündiges Layout
3. InternetExplorer im STANDARD-Mode – zentriertes Layout
4. Mac IE5 – zentriert
5. Mac IE5 – linksbündig & transparente Inhaltsbox

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.

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%).

Foto: robertmichael – Photocase.de

Um Floats auf einen Text-Absatz oder den Text bis zur nächsten Überschrift zu beschränken, bedarf es nur der Zuweisung der CSS-Klasse .floatbox für den Textabsatz oder einen DIV-Container, der die Float-umgebung umschließt und an dessen Ende alle gefloateten Elemente automatisch ge”cleart” werden.

Zwei Beispiele (übernommen aus der YAML-Dokumentation):

<p class="floatbox">
  <img src="bild.jpg" style="float:left;" alt="" />
  Hier folgt der Text des Absatzes, welcher das Bild umfliesst ...
</p>

<p>Hier ist der Textfluss zu Ende. Dieser Absatz beginnt immer unterhalb des Bildes.</p>

<h2>Teilüberschrift 1</h2>
<div class="floatbox">
  <img src="bild.jpg" style="float:left;" alt="" />
  <p> ... viel viel Fließtext ...</p>
  <p> ... noch mehr Fließtext ...</p>
  <p> ... und noch ein letzter Absatz im Textfluss</p>
</div>

<h2>Teilüberschrift 2</h2>

Mehr dazu auf den YAML-Seiten »

Tja, keine Ahnung, warum ich das immer überlesen hatte – auf jeden Fall kann ich es hier auf der Netzspielwiese (die ja glücklicherweise auf YAML gebaut ist) richtig gut gebrauchen.
Und damit ich es nicht wieder vergesse, hab´ ich es hier fest gehalten.

Ihre Position wird immer von der linken oberen Ecke des nächstgelegenen Eltern-Elementes bestimmt, welches absolut, fixed oder relativ positioniert wurde.
Gibt es ein solches Element nicht, so beziehen sich alle Positionsangaben auf die obere linke Ecke des Browserfensters, den so genannten Viewport.

Die Position wird durch die Eigenschaften top, right, bottom oder left angegeben und somit um den entsprechenden Wert nach links, rechts, oben oder unten verschoben.

Dabei sollte immer nur entweder left oder right bzw. top oder bottom definiert werden.

Möchte man ein Element also innerhalb eines anderen Elementes absolut positionieren, so ist es empfehlenswert, ein in der Reihenfolge im Quelltext vor dem Element liegendes Elternelement erst relativ positionieren.
Damit wird dieses zum Bezugspunkt für das nun absolut zu positionierende innen liegende Element.

Beispiel für ein rechts oben positioniertes Element:

HTML:

<div id="box">
<p class="rechtsoben">Ich stehe immer rechts oben.</p>
</div>

CSS:

#box {
 position:relative;
 height:100px;
 width:300px;
 background-color:#FFEAC0;
 border: 1px solid #FFA800;
}
.rechtsoben {
 position:absolute;
 top:10px;
 right:10px;
 color: #cc0000;
}

Das Element wird so 10px vom oberen rechten Rand seines Elternelementes aus positioniert!

Und so sieht das Ganze dann live aus:

Foto: Powermind – Photocase.de

Dabei schreibt er einfach und verständlich.
“Little Boxes“ – sein Grundlagen-Buch zum Thema CSS ist sicher ebenfalls sehr lesenswert.

Der Artikel beschreibt, wie man mit Hilfe von CSS eine ansprechende horizontale Tab-Navigation gestaltet. Dabei werden Hintergrundbilder verwendet, die sich wie Schiebetüren ineinander schieben, so dass jeder Tab so lang ist wie der in ihm enthaltene Text.

Teil 1 (Die Grundlage) »
Teil 2 (Weiterentwicklung der Technik) »

Praktisch ist es dann, wenn das Element, in welchem der Quellcode dargestellt wird, automatisch einen horizontalen Scrollbalken einblendet, wenn die Zeile breiter ist, als das umschließende Element, wie hier zu sehen:

Dazu genügt es, für das Element, innerhalb dessen der Quellcode angezeigt wird, die CSS-Definition overflow:auto; zu notieren!

Das CSS für eine Quellcode-Darstellungs-Box könnte zum Beispiel so aussehen:

pre {
 margin:1em;
 padding:1em;
 border:1px solid #ededed;
 display:block;
 background-attachment: scroll; /* erzeugt Scrollbar */
 overflow:auto;
}

Zum Anzeigen von Quelltext innerhalb eines HTML-Dokumentes eignet sich übrigens das <pre>-Tag ganz besonders, da es jeden Inhalt zwischen Anfangs- und End-Tag in dicktengleicher Schrift darstellt und Einrückungen so wiedergegeben werden, wie sie beim Editieren eingegeben wurden.

Trotzdem müssen aber Sonderzeichen, wie Tags oder Klammern im HTML-Quelltext als HTML-Entities notiert werden.

Im HTML-Code würde dann also beispielsweise stehen:

<pre>&lt;p&gt;Das ist ein Beispiel-Absatz&lt;/p&gt</pre>

Ganz einfach geht das mit dem Worpress-Plugin Simple Code.

Cameron Adams, The Man in Blue, hat ein Tool kreiert, mit dem die Inhalte einer Website mit dem CSS einer anderen Website verschmelzen: CSS Love Child.

Witziges Tool :o)
Leider habe ich noch keine Kombination gefunden, bei der das Ergebnis auch nur halbwegs ansprechend aussah …

via CSS Beauty

Leider unterstützt der Internet Explorer diese CSS-Eigenschaften nicht.

Cameron Moll stellt auf seiner Website einen in seinem Buch CSS-Mastery beschriebenen Weg vor, dem Internet Explorer trotzdem ein ähnliches Verhalten beizubringen, und zwar mit Hilfe von JavaScript-Expressions.

Im CSS muss dafür folgendes notiert werden:

#container, #footer {
 width: expression(document.body.clientWidth < 742 ? "740px"
 : document.body.clientWidth > 1202 ? "1200px" : "auto");
}

Per JavaScript wird hier für die Ebenenen #container und #footer die Breite des Browserfensters abgefragt.
Ist es schmaler als 742px, so wird die Breite der Ebene auf 740px gesetzt und damit die min-width definiert.
Ist das Browserfenster breiter als 1202 px, wird die Breite der Ebene auf 1200px gesetzt und damit die max-width definiert.

Bei der Verwendung dieses Codes ist darauf zu achten, dass die abgefragte Breite nicht mit der später festzusetzenden maximalen bzw. minimalen Breite gleich sein darf.

Eine Angabe in der Form:

document.body.clientWidth < 740 ? "740px"

erzeugt einen Absturz des Internet Explorers, sobald man versucht, die Fenstergröße zu ändern.

Deshalb immer einen kleinen Unterschied zwischen den Vergleichszahlen lassen:

document.body.clientWidth < 745 ? "740px"

Auf dieser Seite von Cameron Moll kann man den eingebundenen Code in Aktion sehen »
Hier und hier findet sich die Diskussion der vorgestellten Lösung.

Foto: sherlock0574 – Photocase.de

• CSS Code Visual Grouping Techniques von Six Things
• CSS Coding Conventions von phpied.com
• 5 Ways For Organizing Your CSS von Erratic Wisdom
• Lean XHTML And Precise CSS – 9rules Network
• Die Organisation und Strukturierung von CSS Dateien von Heiko S.
• XHTML- und CSS-Code-Richtlinien bei GMX von Jens Meiert
• Perun gewährt Einblicke in das von ihm entwickelte CSS für die Webkrauts
• Und auch die Expertinnen haben einen Tip für´s CSS

Jede Menge Anregungen also um auch den eigenen CSS-Code mit Struktur zu gestalten.

Foto: öda – Photocase.de

Einmal installiert kann man in der Firefox-Menüleiste unter “Extras” bzw. in der englischen Version unter “Tools” den CSS-Viewer aktivieren.
Nun umrahmt er jedes Element, über dem sich die Maus gerade befindet, und zeigt die zugehörigen CSS-Eigenschaften in einem schön gestalteten Fenster übersichtlich an.

Prima! So was hab ich mir schon immer gewünscht!

(Leider fügt die Erweiterung bei mir keinen Eintrag zum Kontextmenü hinzu …)

Passend dazu: die Firefox-Erweiterung X-Ray, die den Quellcode einer Seite innerhalb der Inhalte anzeigt:

Inhalt mit flexibler Breite innerhalb des Bodys horizontal zentrieren (z.B. die Inhalte einer Website mittig ausrichten):

HTML:

<html>
 <head>...</head>
 <body>
  <div id="inhalt"></div>
 </body>
</html>

CSS:

body {
	text-align:center; /* für den IE */
}
#inhalt {
	margin:0 auto;
}

Beliebiges Element mit fester Breite innerhalb eines anderen Elements oder des Bodys horizontal und vertikal zentrieren:

HTML:
<div id="rahmen">
 <div id="centerbox"></div>
</div>

CSS:

#centerbox
      {
      position: absolute;
      width: 200px;
      height: 200px;
      left: 50%;
      top: 50%;
      margin-left: -100px; /* Hälfte der Breite */
      margin-top: -100px;  /* Hälfte der Höhe */
      }

Ausführlichere Erklärungen »
Und auch auf deutsch »
CSS – vertikal zentrieren – Lösung von D. Janovský »

Lösung:
Einem Float mit margin in Floatrichtung immer ein “display: inline;” hinzufügen.
Indem ein Element gefloatet wird, wird es automatisch Blockelement. Die Eigenschaft “display: inline” ändert daran nichts. Sie wird ignoriert.
Einziger Effekt: im IE wird die fehlerhafte Verdoppelung des margins behoben.

#FloatElement
{
       float: left;
       margin-left: 10px;
       display: inline;
}

Mehr CSS-Tipps: CSS-FAQ »