CSS x 350*300px float DIVs zentrieren?

[CitroenDsVier]

Hallo zusammen,

gegeben ist folgendes Problem: Es existiert ein content-div der Breite 80%. Darin befinden sich einige DIVs der Breite 300px + 2*25px margin = 350px. Diese sind links gefloatet. Das hat den Vorteil, dass sie sich nebeneinander anordnen. Nun ist die Frage, wie ich bei 80% = 910px (als Beispiel) die restliche Breite herausbekomme, die nicht durch DIVs eingenommen wird.
Dazu kann ich calc(910px [oder 80%] / 350px) rechnen, kommt 2.6 raus. Damit weiß ICH, dass 2 DIVs da sind, 0.6 DIVs nicht da sind, demnach links und rechts des content-divs je 0.3*350px padding sein müssen, um die inneren DIVs zu zentrieren.
Den Schritt von 2.6 auf 0.6 kann ich CSS allerdings nicht beibringen. Von 2.6 auf 2.0 würde ja auch reichen, dann könnte man anschließend noch 2.6 - 2.0 rechnen = 0.6. Aber runden scheint CSS auch nicht zu können.

Ein margin: x auto; auf die inneren DIVs zu legen geht nicht, das funktioniert nicht.

Zum besseren Verständnis mal eine Skizze angehängt

Ich wäre über Lösungen oder Antworten sehr froh

MfG, V40

 

[FranzvonAssisi]

Ich weiß nicht, ob ichs richtig verstanden habe, aber wenn die Divs eine feste Breite von 300px haben hieße das doch bei 2.6 Divs, dass 0.6*300px der Rest ist.

Lg, Franz

 

[savuti]

Hmm, du willst drei divs in einer Reihe zentriert haben und dann die nächsten in einer neuen Reihe, oder? Wieso dann so kompliziert? Nimm als Breite der Content div 3x350 und margin-left: auto; und margin-right: auto;.

 

[CitroenDsVier]

350px, aber ja.

Richtig und wie komme ich von 2.6 auf 0.6?

 

[Ayeri]

Für das allgemeine Verständnis.

Das ist dein Ziel? Oder habe ich was falsch verstanden?

 

[CitroenDsVier]

@Ayeri: Jap, genau.

Die Sache ist die, dass bei einer breiteren Seite 80% mehr sind und dann 4 oder mehr DIVs in einer Reihe sind. 2 DIVs sind auch noch möglich, alles darunter wird von einer Tablet-CSS abgedeckt.

Nachtrag: Ein max-margin & min-margin würde es auch tun, dann könnte man das margin berechnen... Gibts aber leider nicht.

 

[savuti]

Ich "erschlage" sowas mit Media Queries...

 

[CitroenDsVier]

Ich "erschlage" sowas mit Media Queries...

Das wäre natürlich auch eine Option... Versuche ich gerade mal. Kann ich denn in das "@media screen and (min-width:1024px)" ein weiteres @media screen packen?

 

[jumpin]

Gemäss der Grafik in Bild 1:
Wie wäre es mit: calc(80% mod 350px)

Mod -> Rest bei einer Division

 

[savuti]

Nebenbei: calc wird nicht vom IE8 und drunter unterstützt - leider.

 

[CitroenDsVier]

Gemäss der Grafik in Bild 1:
Wie wäre es mit: calc(80% mod 350px)

Mod -> Rest bei einer Division

Nein, wirklich? Das wäre super!

Nebenbei: calc wird nicht vom IE8 und drunter unterstützt - leider.

Das ist mir nicht so wichtig, wer IE benutzt ist (eh) selbst Schuld

 

[savuti]

Selbst schuld ist so eine Sache. In vielen Firmen/Institutionen müssen User den IE benutzen. Meiner Meinung nach ist IE8-Kompatibilität Pflicht.

 

[JP-M]

Es gibt auch noch IE 6 User. denkt doch mal einer an die IE 6 User!

​Was wäre denn hier der Nachteil für IE8 User? Ah.. sie hätten die alte "unschöne" Anzeige, würden aber immer noch den Inhalt sehen ;-).Kompatibilität zum IE 9 wäre das eine, da der immerhin sehr viele HTML5 / CSS3 Features unterstützt.. aber IE8? Für Intranetseiten bei mehr als 10% der Zugriffe mit einer solch veralteten Version geschehen mag das vielleicht sinnvoll sein, aber nicht für eine "Wald und Wiesen" Website.

 

[CitroenDsVier]

calc( ((80% - 50px) mod 350px) / 2) funktioniert leider nicht, wenn ich das als padding-left und padding-right für den content-div nehme...

Wie würdest du das denn mit den media @'s machen? Kann man die wie folgt schachteln?

@media screen and (min-width: 1024px) {
-normale css-
@media screen and (max-width: 1050px) {
sonstwas
}
@media screen and (min-width; 1051px) and (max-width: 1100px) {
sonstwas
}
}

?

Ergänzung (4. November 2015)

das 80%-50px ist durch das margin des content-divs von je 25px übrig geblieben, kann man sich einfach wegdenken...

Ergänzung (4. November 2015)

Den margin der inneren DIVs auf auto zu setzen wäre natürlich das einfachste, wenns denn funktionieren würde. Der wird dann = 0.

Ergänzung (4. November 2015)

Alles klar, ich werde jetzt einen anderen Weg gehen. Ich habe ein weiteres DIV um die kleinen DIVs gesetz, dem folgenden Style gegeben (nicht verwirren lassen, das ehemalige content heißt jetzt anders):
#content {
margin: 0 auto;
margin-top: 5px;
height: 100px;
}

Trotzdem nimmt das neue content-div die für es maximale Breite von 80% (die das übergeordnete div hat) an. Damit lässt es sich als ganzes nicht mehr zentrieren. Woran liegt das?

 

[Teisi]

das es ein div ist... (blockelement)
dem musst du schon auch ne breite geben, oder nimmst halt kein div...

ich könnt jetzt noch mit der js keule kommen... ?!
sonst wird das nichts, denn 33% auf 100% lässt sich nunmal nicht aufteilen, was bedeutet das du mit komma stellen rechnen musst und da läufst du gefahr das verschiedene browser verschieden runden.

Oder du lebst damit das es nicht auf den pixel genau passt, in dem Fall:
Rechter kasten: float right mit padding
Link kasten: float left mit dem selben padding wie rechter kasten
und dem mittlerem float left oder links und ein angepasstes padding. (Sieht doch sowieso keiner wenns um einen pixel ned passt, wird scho keiner mitm lineal nachmessen...)

edit: bzw:
bei deinem inneren container:
kein float, margin 0 auto, width die breite die die kästen mit padding haben zusammengerechnet...

 

[CitroenDsVier]

den rechten Kasten kann ich nicht rechts floaten, da das ganze responsive sein soll. D.h. bei kleineren Bildschirmen sinds dann nur noch drei in einer Reihe. Dann wäre der vierte Kasten in der nächsten Zeile.

Wenn man als Ziel sieht, dass einfach nur alle Kästen in gleichem Abstand von 50px (2x 25px margin) zueinander als Ganzes zentriert werden sollen, könnte man ja ein DIV drumrum machen, das zentrieren. Da müsste man die Breite aber auch ausrechnen.

 

[Teisi]

jetzt steh ich aufn schlauch... dachte du hast schon nen kasten drum rum?
die breite berechnen ist ja kein akt, wenn du ja sowieso fixe breiten in den kästen hast und der margin auch fix ist...

 

[CitroenDsVier]

Tschuldigung, dass ich mich nicht mehr gemeldet hab. Hatte keine Zeit soweit.

Ja, ein content-div ist drumherum:

<div id="content">
				<div id="heading"></div> <!-- nicht gefloatet, oben drüber zentriert -> unwichtig -->
				
				<div class="topic" id="topic1"> <!-- ab hier sind alle nach links gefloatet -->
					
				</div>
				
				
				<div class="topic" id="topic2">
					
				</div>
				
				<div class="topic" id="topic3">
					
				</div>
				
				<div class="topic" id="topic4">
					
				</div>
				
				<div class="topic" id="topic5">
					
				</div>
				
				<div class="topic" id="topic6">
					
				</div>
				
				<div class="topic" id="topic7">
					
				</div>
				
				<div class="topic" id="topic8">
				
				</div>
				
				<div class="topic" id="topic9">
					
				</div>
				
				<div class="topic" id="topic10">
					
				</div>
				
				<div class="topic" id="topic11">
					
				</div>
				
				
				
				<div style="clear:both;"></div>
			</div>

dazu folgendes css:

#content {
/* (erbt 80% Breite der Gesamtbreite) */
}

div.topic {
		height: 300px;
		width: 300px;
		margin: 24px;
		margin-top: 5px;
		margin-bottom: 50px;
		background-color: #c0c0c0;
		float: left;
		border-radius: 5px;
		border: 4px solid #000;

		/* grow */
		-webkit-transition-duration: 0.3s;
		transition-duration: 0.3s;
		-webkit-transition-property: transform;
		transition-property: transform;
	}

Tabs setzen geht hier ja nicht (springt zum nächsten Button auf der Antworten-Seite), deswegen sieht das ganze etwas Kraut und Rüben aus.

 

[Ayeri]

Kleiner Tipp am Rande für solche Dinge:
Nutz jsfiddle.net, tidyup, save, link posten.

https://jsfiddle.net/k7yde9bb/1/

Habe übrigens bisschen hin und her überlegt.
Alles was calc in Verbindung mit mod angeht, trifft auf kaum Unterstützung.
Ansatz:
maxBoxCount: (content-width / box-width) - (content-width mod box-width)
emptySpace: (content-width mod box-width)
boxMargin: margin: 25px calc(25px + emptySpace / maxBoxCount)
Probleme:
1. mod wird kaum bis garnicht unterstützt
2. div0 möglich
3. calc / funktioniert nur, wenn der Divisor eine Nummer (also keine px % etc.) ist.

Das einfachste wären wirklich Mediaqueries.
Ich habe grade leider nicht so viel Zeit für Details. Sollte aber auch kein großer Act sein.

Media-Querry1 bis 2 boxen möglich sind
Media-Querry2 bis 3 boxen möglich sind;
Media-Querry3 bis 4 boxen möglich sind;
mehr würde ich nicht nehmen.

 

[CitroenDsVier]

okay, dann werde ich das mit den MQ machen und mich danach nochmal melden. Vermutlich aber nicht diese Woche...