25% + padding + border?

[Cyberbird]

Hi!

Ich möchte in einem definierten Container 4 divs nebeneinander anordnen, jedes mit 25% Breite, so dass der gesamte Container ausgefüllt wird.

#container {
   width: 600px;
   height: 200px;
   border: 1px solid black;
   background-color: #CCFF99;
   }

#in1, #in2, #in3, #in4 {
   height: 200px;
   width: 25%;
   float: left;
   
   background-color: #CC6600;
   border: 1px solid black;   
   padding: 10px;
   
   text-align: center;
   vertical-align: middle;
   font-size: 36px;
   font-weight: bolder;
   }

Hier die Seite: http://www.cyberbird-design.com/css

Wenn ich allerdings das padding und den border benutze, bricht der letzte Container immer um, weil padding und border anscheinend auf die 25% draufgerechnet werden. Hat jemand einen Tipp, wie ich es trotzdem schaffe? Und warum in Dreiteufelsnamen funktioniert das Ganze im Firefox überhaupt nicht?!

Basti

 

[Sven Mintel]

Mmmh...gib doch den inneren <div>'s eine Breite von 150...und nehm die 600px aus dem äusseren heraus ...das sollte auch der Firefox können

 

[Fabian H]

Du könntest noch einen Div in die "in"-Divs platzieren, und dem dann das Padding
geben.

Also:

<div id="container">
  <div id="in1"> <!-- hat keine padding Eigenschaft mehr -->
    <div id="inin1" style="padding:10px;">
      Eigentlicher Inhalt
    </div>
  </div>
  <div id="in2">
    [...]
  </div>
</div>

Btw: Das Verhalten vom Mozilla ist richtig!
Laut Standard vergrößert padding die "Content-width" (CSS-width), wenn
du also width:100px; padding:10px; hast, sollte dein Div dann 120 Pixel breit sein.

(Das nur mal so am Rande)
Nachzulesen im CSS Standard - Box Model [w3c.org] und beim Abschnitt über die width Eigenschaft

 

[Cyberbird]

Du könntest noch einen Div in die "in"-Divs platzieren, und dem dann das Padding

Das funktioniert auch nicht richtig:

#container {
	width: 600px;
	height: 200px;
	
	border: 1px solid black;
	background-color: #CCFF99;
	}

#in_1, #in_2, #in_3, #in_4 {
	height: 100%;
	width: 25%;
	float: left;
	
	padding: 0px;
	margin: 0px;
	border: none;
	background-color: #CC9999;
	}
	
#in_1a, #in_2a, #in_3a, #in_4a {
	height: 200px;
	width: 100%;
	
	background-color: #CC6600;
	border: 1px solid black;	
	padding: 10px;
	
	text-align: center;
	vertical-align: middle;
	font-size: 36px;
	font-weight: bolder;
	}

Wenn ich also in die inneren Boxen jeweils noch eine Box setze und deren Breite auf 100% setze, dann wird padding und border wieder auf die 100% draufgerechnet, so dass das letzte Element wieder umbricht.

 

[CHT]

Hallo,

warum machst Du so kompliziert?
Du hast sowieso eine feste Breite von 600px. Also anstatt 25% zu schreiben,
gib einfach die richtige Breite für deine 4 innere Bereiche.

die Breite von 128px kommt von :

600:4=150 -> 4 Bereiche
150-10+10=130 -> padding:10px (links + rechts)
130-1-1=128 -> border:1px (links + rechts)

#container {
   width: 600px;
   height: 200px;
   border: 1px solid black;
   background-color: #CCFF99;
   }

#in1, #in2, #in3, #in4 {
   height: 200px;
   width: 128px;
   float: left;
   
   background-color: #CC6600;
   border: 1px solid black;   
   padding: 10px;
   
   text-align: center;
   vertical-align: middle;
   font-size: 36px;
   font-weight: bolder;
   }

Grüße
Christian

 

[Mogler]

trotzdem muss man wegen des box-model bugs (win IE) die divs verschachteln (div in div) ...

äusseres div mit angabe der width - inneres ohne - dann sollte es klappen

Mogler

 

[CHT]

Hallo Mogler,

also mit dem Code von oben, brauche ich keine Div in Div.
Ich habe es nochmal mit IE6, Firefox 0.8, Opera 7.23 und Netscape 7.1 ausprobiert.
Funktionniert ohne Problem.

Grüße
Christian