CSS x 350*300px float DIVs zentrieren?

CitroenDsVier

Lt. Commander
Dabei seit
Dez. 2013
Beiträge
1.769
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 :freak:

MfG, V40

DIVproblem.jpg
 

FranzvonAssisi

Vice Admiral
Dabei seit
Dez. 2013
Beiträge
6.546
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

Lt. Commander
Dabei seit
Jan. 2010
Beiträge
1.333
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;.
 

Ayeri

Cadet 3rd Year
Dabei seit
Juni 2014
Beiträge
58
Für das allgemeine Verständnis.
Unbenannt-1.jpg
Das ist dein Ziel? Oder habe ich was falsch verstanden?
 

CitroenDsVier

Lt. Commander
Ersteller dieses Themas
Dabei seit
Dez. 2013
Beiträge
1.769
@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.
 

jumpin

Lt. Commander
Dabei seit
Sep. 2013
Beiträge
1.148
Gemäss der Grafik in Bild 1:
Wie wäre es mit: calc(80% mod 350px)

Mod -> Rest bei einer Division
 

CitroenDsVier

Lt. Commander
Ersteller dieses Themas
Dabei seit
Dez. 2013
Beiträge
1.769

savuti

Lt. Commander
Dabei seit
Jan. 2010
Beiträge
1.333
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

Lieutenant
Dabei seit
Mai 2008
Beiträge
946
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.
 
Zuletzt bearbeitet: (Zeilenumbruch)

CitroenDsVier

Lt. Commander
Ersteller dieses Themas
Dabei seit
Dez. 2013
Beiträge
1.769
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 ()

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

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 ()

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

Lt. Junior Grade
Dabei seit
Okt. 2008
Beiträge
439
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...
 
Zuletzt bearbeitet:

CitroenDsVier

Lt. Commander
Ersteller dieses Themas
Dabei seit
Dez. 2013
Beiträge
1.769
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

Lt. Junior Grade
Dabei seit
Okt. 2008
Beiträge
439
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

Lt. Commander
Ersteller dieses Themas
Dabei seit
Dez. 2013
Beiträge
1.769
Tschuldigung, dass ich mich nicht mehr gemeldet hab. Hatte keine Zeit soweit.

Ja, ein content-div ist drumherum:

HTML:
<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:
Code:
#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

Cadet 3rd Year
Dabei seit
Juni 2014
Beiträge
58
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.
 
Zuletzt bearbeitet:
Top