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

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;
}

  1. 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

    --
    Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
    Terry Pratchett, "Wachen! Wachen!"
    ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
    Veranstaltungsdatenbank Vdb 0.3
    1. @@Auge:

      nuqneH

      Mit calc.

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

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      1. 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?

        1. 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

          --
          Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
          Terry Pratchett, "Wachen! Wachen!"
          ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
          Veranstaltungsdatenbank Vdb 0.3
          1. 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

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Fan und Fango.

  2. 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