Kackfohgel.: 3 DIV-Container nebeneinander [Problem gelöst]

Hallo,

ich würde gerne 3 Tabellen DIV-Container unter Ausnutzung der vollen Bildschirmbreite nebeneinander darstellen.

Laut http://de.selfhtml.org/css/formate/box_modell.htm@title=Boxmodell besteht die Gesamtbreite eines Elements aus margin, border, padding und width.

Deshalb habe ich meine 3 Container mit folgenden Attributen ausgestattet.

<!-- container 1 -->  
<div style="width: 27%; margin: 3%; padding: 3%; border: 0px; float: left;">  
  <!-- Inhalt 1 -->  
</div>  
  
  
<!-- container 2 -->  
<div style="width: 27%; margin: 3%; padding: 3%; border: 0px; float: left;">  
  <!-- Inhalt 2 -->  
</div>  
  
  
<!-- container 3 -->  
<div style="width: 27%; margin: 3%; padding: 3%; border: 0px; float: left;">  
  <!-- Inhalt 3 -->  
</div>

Rechne ich jetzt die Angaben zusammen
3 x (27 + 3 + 3)
komme ich auf 99%, dennoch ...

... ach Mist, margin und padding ist ja zu verdoppeln, weil sie links und rechts auftauchen. Mit margin: 0px klappt es wie gewünscht.

Eigentlich besteht jetzt garkein Bedarf mehr, dieses Post abzuschicken*,aber ihr habt mir mal wieder sehr geholfen. Wie so oft, bin ich durch die Beschreibung des Problems wieder selbst auf die Lösung gekommen. Dafür danke :-)

*Wobei ihr sicher meine Lösung noch konstruktiv kritisieren werdet ;-)

  1. Hi,

    *Wobei ihr sicher meine Lösung noch konstruktiv kritisieren werdet ;-)

    na, "kritisieren" würde ich nicht sagen.
    Nur so als Anmerkung: Wenn eine Maßangabe den Zahlenwert 0 hat, kann man die Einheit auch weglassen. Denn 0 Meter ist dasselbe wie 0 Meilen oder 0 Ellen, es ist einfach 0.
    In CSS ist das auch so. :-)

    Ciao,
     Martin

    --
    "Mutti, hier steht, das Theater sucht Statisten. Was sind Statisten?" - "Das sind Leute, die nur rumstehen und nichts zu sagen haben." - "So wie Papa?"
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    1. Hallo Martin!

      Nur so als Anmerkung: Wenn eine Maßangabe den Zahlenwert 0 hat, kann man die Einheit auch weglassen. Denn 0 Meter ist dasselbe wie 0 Meilen oder 0 Ellen, es ist einfach 0.
      In CSS ist das auch so. :-)

      Ich war mir nicht so ganz sicher, ob eine Einheit nicht immer erforderlich ist. Klar 0px entsprechen (in etwa ;-)) auch 0% oder 0cm, aber hätte ja sein können, das für die Validität eine Maßeinheit zwingend gegeben sein muss.

      Vielen Dank für den Hinweis, werde die Maßeinheit dann weglassen.

      Gruß
      Kackfohgel

      1. @@Kackfohgel.:

        nuqneH

        Ich war mir nicht so ganz sicher,

        Warum liest du dann nicht nach? [CSS2 §4.3.2, CSS21 §4.3.2, CSS3VAL §5]

        Qapla'

        --
        Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
        1. gudn tach!

          Warum liest du dann nicht nach? [CSS2 §4.3.2, CSS21 §4.3.2, CSS3VAL §5]

          vermutlich, weil er eine funktionierende moeglichkeit kannte und das detail, ob da nun die einheit wegfallen _darf_ oder nicht, (ihm) egal war.

          prost
          seth

          1. vermutlich, weil er eine funktionierende moeglichkeit kannte und das detail, ob da nun die einheit wegfallen _darf_ oder nicht, (ihm) egal war.

            Ja, so war es wirklich. Die Einheit zu setzen war wohl einfach bequemer für mich anstatt mich da tiefer einzulesen. Dennoch bin ich natürlich dankbar für diese Hinweise und Links; zumal ich an der Stelle wirklich (ganz ehrlich) kurz überlegt hatte, ob ich eine Einheit setzen soll/muss/kann.

    2. Moin Moin!

      na, "kritisieren" würde ich nicht sagen.
      Nur so als Anmerkung: Wenn eine Maßangabe den Zahlenwert 0 hat, kann man die Einheit auch weglassen. Denn 0 Meter ist dasselbe wie 0 Meilen oder 0 Ellen, es ist einfach 0.

      Nur gut, dass das für °C und K nicht gilt ... ;-)

      Alexander

      --
      Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so".
  2. @@Kackfohgel.:

    nuqneH

    Laut http://de.selfhtml.org/css/formate/box_modell.htm@title=Boxmodell besteht die Gesamtbreite eines Elements aus margin, border, padding und width.

    Da lässt sich ändern. [Kroener, Coyier]

    Eigentlich besteht jetzt garkein Bedarf mehr, dieses Post abzuschicken*,

    Eigentlich besteht jetzt gar kein Bedarf mehr, ein ungeliebtes Box-Modell zu verwenden.

    Qapla'

    --
    Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
    1. Hallo Gunnar,

      box-sizing kannte ich noch garnicht ... werd ich aber für zukünftige Projekte sicher mal im Hinterkopf behalten (zumal ich wirklich jedes mal im Boxmodell nachschlagen musste, wie das den jetzt nochmal war; Größe = width + margin oder doch border und padding noch mit hinzurechnen). Da hab ich jetzt noch ein paar Optionen mehr, die mich verwirren äääh die ich verwenden kann ;-)

      Gruß
      Kackfohgel