breite DIVs auf volle Seitebreite skalieren

[bimini]

Hallo.

ich habe folgende Problematik.
Es gibt 22 Divs(class:"zimmer") die nebeneinander angezeigt werden müssen. Und zwar soll die Breite aller Divs zusammen der Breite des im Baum eine ebene höher liegende Divs(class:"Stockwerk") entsprechen. Also sie sollen alle Zusammen gleich breit sein wie #stockwerk

  
<div class="stockwerk">  
	<div class="zimmer">C-009</div>  
        <div class="zimmer">C-010</div>  
        <div class="zimmer">C-011</div>  
        <div class="zimmer">C-012</div>  
        <div class="zimmer">C-013</div>  
        <div class="zimmer">C-014</div>  
        <div class="zimmer">C-015</div>  
        <div class="zimmer">C-016</div>  
        <div class="zimmer">C-017</div>  
        <div class="zimmer">C-018</div>  
        <div class="zimmer">C-019</div>  
        <div class="zimmer">C-020</div>  
        <div class="zimmer">C-021</div>  
        <div class="zimmer">C-022</div>  
</div>

  
.stockwerk {  
	position: relative;  
	float:left;  
	margin-top: 50px;  
	width: 100%;  
	height: 400px;  
	background-color: #F4EBC3;  
	margin-bottom: 10px;  
}  
  
.zimmer {  
	font-family: Verdana, Geneva, sans-serif;  
	height: 60px;  
	width: 6.7%;  
	background-color: #4ECDC4;  
	float: left;  
	text-align: center;  
	border: 2px solid #000;  
	border-radius: 0px;  
	background-color: #BCD2EE;  
}  

Vielen Dank für die Hilfe

[Matthias Scharwies]

.zimmer {
width: 6.7%;
border: 2px solid #000;

100/22= 4.54

Wenn Du width:4.54% nehmen würdest, hättest du die 2px border, die zusammen 2*2*22 noch mal 88px brauchen würde.

Am besten wäre

* {  
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */  
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */  
	box-sizing: border-box;         /* Opera/IE 8+ */  
}

Dann werden alle borders und paddings "passend gemacht"!

[Gunnar Bittersmann]

@@Matthias Scharwies:

nuqneH

100/22= 4.54

Nö, etwas mehr.

Wenn Du width:4.54% nehmen würdest, hättest du

… immer noch 0.12% Breite übrig, die man sieht.

Wenn Du width:4.54545454% nehmen würdest, könnte durch Rundungsfehler die letzte Box in die nächste Zeile rutschen.

Statt Floats zu verwenden, könnte man auch

.stockwerk { display: table; width: 100% }  
.zimmer { display: table-cell }

verwenden.

Oder mit zusammenfallenden Rahmen:

.stockwerk { display: table; width: 100%; border-collapse: collapse }  
.zimmer { display: table-cell }

Qapla'

[bimini]

@@Matthias Scharwies:

nuqneH

100/22= 4.54

Nö, etwas mehr.

Wenn Du width:4.54% nehmen würdest, hättest du

… immer noch 0.12% Breite übrig, die man sieht.

Wenn Du width:4.54545454% nehmen würdest, könnte durch Rundungsfehler die letzte Box in die nächste Zeile rutschen.

Hab da im Ursprungspost ein fehler gemacht. Wie im HTML sind es nur 14 Elemente.
Leider rundet da jeder Browser ein bisschen anderst Chrome/Opera passt, beim IE11 ist noch ein ganz kleiner Rand zu sehen. Beim alten Opera 12 ein relativ breiter.

Statt Floats zu verwenden, könnte man auch

.stockwerk { display: table; width: 100% }

.zimmer { display: table-cell }

>   
> verwenden.  
  
Wenn ich das mache dann  vergrößert er die zellen bis zu einer bestimmten größe und dann ist ein leerer bereich auf der linken seite.  
  

> Oder mit zusammenfallenden Rahmen:  
>   
> ~~~css

.stockwerk { display: table; width: 100%; border-collapse: collapse }  

> .zimmer { display: table-cell }

Qapla'

[bimini]

.zimmer {
width: 6.7%;
border: 2px solid #000;

100/22= 4.54

Wenn Du width:4.54% nehmen würdest, hättest du die 2px border, die zusammen 2*2*22 noch mal 88px brauchen würde.

Am besten wäre

• {

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit /
-moz-box-sizing: border-box;    / Firefox, other Gecko /
box-sizing: border-box;         / Opera/IE 8+ */
}

>   
> Dann werden alle borders und paddings "passend gemacht"!  

Hab das jetzt mal angepasst.  
  
Sieht auch ganz gut aus aber, ich habe auf der rechten Seite noch einen kleinen freien Bereich.  
Gibt es eine möglichkeit den wegzubekommen bzw. wenn das nicht geht die ganze Reihen der Quadrat einfach zu zentrieren?  
  
HTML ist gleich geblieben.  
CSS sieht jetzt so aus:  
  
~~~css
  
.zimmer {  
	font-family: Verdana, Geneva, sans-serif;  
	height: 60px;  
	width: 7.1%;  
	background-color: #4ECDC4;  
	float: left;  
	text-align: center;  
	border: 2px solid #000;  
	border-radius: 0px;  
	background-color: #BCD2EE;  
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */  
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */  
        box-sizing: border-box;         /* Opera/IE 8+ */  
}  
  

Im Browser sieht es so aus: https://www.dropbox.com/s/95he0x2kseqgrhy/Unbenannt.PNG