CSS Divs sollen width gleichmäßig verteilen

[Adem67]

Hallo zusammen,

wie kann ich folgendes bewerkstelligen:

5 Divs nebeneinander in einem container, welcher die eigenschaft width 100% hat. Alle Divs sollen nun eine width von 20% haben. Hat ein Div aber 40%, sollen die restlichen Divs den Platz unter sich teilen (also 15%).

Ist das möglich?

Danke und Gruß

EDIT: width:auto ist nicht möglich

 

[DUNnet]

manuell 40 eintragen und den rest auf auto getestet?

EDIT: Gesehen
dann kP

 

[Kausalat]

Für alle inneren Container musst du einfach Folgendes festlegen:

.normaler-container { min-width: 15%; max-width: 20%; }

Für deinen "40 % breiten" Container musst du die Eigenschaft eventuell mit einem "! Important" versehen:

#mein-breiter-container { width: 40% ! Important; }

 

[Fleshgrinder]

Was aber auch wieder keine dynamische Lösung darstellt, da dies ja voraussetzt, dass der eine Container immer maximal 40% hat.

Also am einfachsten löst du das mit display:table und display:table-cell

<div class="t">
<div class="tc"></div>
<div class="tc"></div>
<div class="tc"></div>
<div class="tc"></div>
<div class="tc"></div>
</div>

.t{display:table}
.tc{display:table-cell}

Nicht getestet

 

[Kausalat]

Was aber auch wieder keine dynamische Lösung darstellt, da dies ja voraussetzt, dass der eine Container immer maximal 40% hat.

Es wurde ja auch nicht angegeben, dass der Container mehr als 40 % Breite erreichen soll.

 

[Fleshgrinder]

Dies habe ich auch nicht behauptet, ich habe lediglich angemerkt, dass es sich um keine flexible Lösung handelt. In der Software-Entwicklung sind Änderungen in den Anforderungen immanent, deshalb sollte von Beginn an auf maximale Flexibilität geachtet werden.

Was bei meinem Code aber sehr wichtig ist: Probleme mit dem Internet Explorer (lt IE8).

 

[Madman1209]

In der Software-Entwicklung sind Änderungen in den Anforderungen immanent, deshalb sollte von Beginn an auf maximale Flexibilität geachtet werden.

Jein, kann ich so nicht unterschreiben. Wenn es nämlich ein unverhältnismäßiger Mehraufwand ist wirst du keinen Kunden finden, der dir den bezahlt. Die sind auch vielleicht bis an ihr Lebensende mit "40%" zufrieden, dann wäre es vergeudete Zeit gewesen. In der Theorie und von der reinen Lehre her gebe ich dir aber vollkommen recht, ordentlich machen und man spart sich später viel Zeit falls Änderungen kommen.

VG,
Mad

 

[Fleshgrinder]

Es ist wohl klar, dass der Aufwand in Relation stehen muss. In diesem Fall besteht kein Mehraufwand. Im Gegenteil, der !important-Hack muss nicht angewendet werden, Verzicht auf weitere IDs.

 

[Madman1209]

Hi,

vollkommen richtig. Habe ich ja auch gesagt, gerade hier als "saubere Lösung" sicher vertretbar und richtig. Nur das generelle Bild wollte ich zurechtrücken.

VG,
Mad