width 20%, inkl. Border 1px, wie?

[Michi]

ich möchte 5 Boxen nebeneinander ausgeben. Solange ich keinen Rahmen rum mache funktioniert es einbandfrei, doch mit Rahmen eben nicht, wie kann ich einen Rahmen anzeigen lassen ohne das er meine Breite beeinflusst. Bzw. wie integriere ich diesen in meine width Angabe?

.box  {
width:20%;
border: 1px solid #fff;
height:100px;
float:left;
}

[Auge]

Hallo

ich möchte 5 Boxen nebeneinander ausgeben. Solange ich keinen Rahmen rum mache funktioniert es einbandfrei, doch mit Rahmen eben nicht, wie kann ich einen Rahmen anzeigen lassen ohne das er meine Breite beeinflusst. Bzw. wie integriere ich diesen in meine width Angabe?

Mit calc. Die Regel ist mittlerweile auch breit unterstützt.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge:

nuqneH

Mit calc.

Nein, nicht an Symptomen herumdoktorn, wenn man das Problem lösen kann.

Qapla'

[TSO]

Mit calc.

Nein, nicht an Symptomen herumdoktorn, wenn man das Problem lösen kann.

Sind das nicht grundsätzlich zwei (gleichberechtigte) Wege um zum selben Ziel zu gelangen?

[Auge]

Hallo

Mit calc.

Nein, nicht an Symptomen herumdoktorn, wenn man das Problem lösen kann.

Sind das nicht grundsätzlich zwei (gleichberechtigte) Wege um zum selben Ziel zu gelangen?

Man erreicht auf beiden Wegen das gleiche Ziel. Der von Gunnar präferierte Weg ist natürlich logischer, da er die Breitenberechnung von vornherein so vornimmt, dass das Problem erst garnicht auftaucht. Diese Möglichkeit wurde übrigens eingeführt, weil so mancher den Weg der reinen Lehre der Höhen- und Breitenberechnung nicht akzeptieren wollte, weil die IE-Formel – der box-sizing: border-box; nachkommt – logischer erschien.

Übrigens, als ich die mit Präfixen und „teilweise unterstützt“-Feldern übersäte Seite sah, hat es mich erst erschreckt. Aber zumindest bezüglich border-box ist die Browserunterstützung ausreichend.

Tschö, Auge

[Matthias Apsel]

Om nah hoo pez nyeetz, Auge!

Übrigens, als ich die mit Präfixen und „teilweise unterstützt“-Feldern übersäte Seite sah, hat es mich erst erschreckt. Aber zumindest bezüglich border-box ist die Browserunterstützung ausreichend.

Ja, padding-box gilt als experimentell. Der Wiki-Artikel ist überarbeitet. Das Beispiel wird noch mal geändert, mittels background-clip: content-box, kann man das padding sichtbar machen.

Matthias

[Matthias Scharwies]

ich möchte 5 Boxen nebeneinander ausgeben. Solange ich keinen Rahmen rum mache funktioniert es einbandfrei, doch mit Rahmen eben nicht, wie kann ich einen Rahmen anzeigen lassen ohne das er meine Breite beeinflusst. Bzw. wie integriere ich diesen in meine width Angabe?

Mit box-sizing: border-box;

  
 .box  {  
 width:20%;  
 border: 1px solid #fff;  
 height:100px;  
 float:left;  
box-sizing: border-box;  
}

Ein Artikel über das alternative boxmodell in der wiki:
http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/box-sizing