2 verschachtelte Boxen mit:

aussen:
float: left;
width: 25%;
margin: 0;
border: 0;
padding: 0;

innen:
!!! keine width-Zuweisung !!!
margin: 10px;
border: 1px solid #333333;
padding: 20px;

Diese verschachtelte Box wird in jedem Browser so dargestellt wie hier. Sie nimmt immer die horizontale Breite ein, die der äusseren Box zugewiesen wurde, und zwar incl. des margin der inneren Box. Mit diesem einfachen Trick erreiche ich eine zuverlässige Anzeige in allen Browsern, egal ob liquid Design oder feste Breite.

Seite 1   Seite 2   Seite 3     zurück zum Artikel

2 verschachtelte Boxen mit:

aussen:
float: left;
width: 50%;
margin: 0;
border: 0;
padding: 0;

innen:
!!! keine width-Zuweisung !!!
margin: 0;
margin-top: 10px;
border: 1px solid #333333;
padding: 20px;

Diese verschachtelte Box wird in jedem Browser so dargestellt wie hier. Sie nimmt immer die horizontale Breite ein, die der äusseren Box zugewiesen wurde, und zwar incl. des margin der inneren Box. Mit diesem einfachen Trick erreiche ich eine zuverlässige Anzeige in allen Browsern, egal ob liquid Design oder feste Breite.

Das margin der jeweils äusseren Boxen habe ich sichtbar gemacht, indem ich den äusseren Boxen einen dunkleren Farbton als Hintergrundfarbe zugewiesen habe. Das margin der mittleren inneren Box wurde auf 0 gesetzt, bis auf margin-top, das hat 10px zur Positionierung der Box.

Die Browser interpretieren die Prozent-Angaben für margin und padding unterschiedlich, der eine bezieht sie auf die Gesamtbreite des Fensters, der andere auf die Breite des Elternelementes. Deshalb empfiehlt es sich, zur Definition von margin und padding px oder em zu verwenden, wir wollen ja eine möglichst einheitliche Darstellung in allen Browsern erreichen.

2 verschachtelte Boxen mit:

aussen:
float: left;
width: 24%;
margin: 0;
border: 0;
padding: 0;

innen:
!!! keine width-Zuweisung !!!
margin: 10px;
border: 1px solid #333333;
padding: 20px;

Diese verschachtelte Box wird in jedem Browser so dargestellt wie hier. Sie nimmt immer die horizontale Breite ein, die der äusseren Box zugewiesen wurde, und zwar incl. des margin der inneren Box. Mit diesem einfachen Trick erreiche ich eine zuverlässige Anzeige in allen Browsern, egal ob liquid Design oder feste Breite.

Wenn sich jemand wundert, warum diese Box nur 24% width hat: das ist ein Sicherheits-Prozent, weil manche Browser bei erreichen einer width-Summe aller 3 Boxen von 100% die rechte Box schon nach unten abrutschen lassen würden.