[CSS] Seitenaufbau wird nicht richtig umgesetzt

[Laire]

Hallo,

es geht um die Seite:

http://gilligans-island.de/index.php...istory&lang=de

Zur besseren Ansicht sind derzeit einige dünne Rahmen um die Elemente gezogen.

Die Seite hat eine Gesammtbreite von 970px:

   #haupt 
      { 
         width: 970px; 
         text-align: left;  
         margin-left: auto; 
         margin-right: auto;
         padding: 0px;
         font-size:12px;
      } 

Die Linke und rechte Spalte haben eine Breite von 174px

      {
         width:174px;
         float: left;
         font-size:10px;
         border-style:solid;
         border-width:1px;
      } 

Der Innenbereich hat eine Breite von 600px und links und rechts einen Aussenabstand von derzeit 8 px:

   #inhalt
      {
         text-align:justify;
         float:left;
         width:600px;
         margin: 0 8px 0 8px;
         border-style:solid;
         border-width:1px;
      } 

Zusammengerchent mit den Rahmen komme ich auf die Gesammt breite. Nun habe ich in der Mitte in dem Bereich #inhalt ein weiteres div Element mit dem Namen .artikel

Dieses Element hat auch eine breite von 600px angegeben und einen Innenabstand (auf allen Seiten von 20px)

   {
      padding:20px 20px 20px 20px;
      width:600px;
      border-style:solid;
      border-width:1px;
      border-color:red;
   } 

Wenn man jetzt auf der Seite sich den Rahmen (rot) anguckt ist dieses Element breiter als sein Elternelement, was ja auch 600px hat :-(

[Kropff]

informier dich mal über das box-modell dann wird dir schnell klar, was los ist.

gruß
peter

[jahlives]

Das Boxmodell von W3C geht davon aus, daß die Angaben zum Padding (innerer Abstand), zum Rahmen und zum Margin (äußerer Abstand) zu dem Content (Inhalt) dazu gezählt bzw. zu der Angabe der Höhe und der Breite des Inhalts addiert werden.

Deine Box müsste also 640px breit sein.

[Laire]

Bzw. in meinem Fall der Inhalt 540px...

Boah ich bekomme nochmal die Krise mit dem ganzen kram....