[Erledigt] div-Spalten mit Prozent-Breite

chunky · 19.10.2010, 14:54

Hallo. Es gibt da etwas was ich noch nie richtig hinbekommen habe.
Und zwar mehrere Spalten mit Div-Containern zu realisieren, die sich wie Zellen einer Tabelle verhalten.

Ein Beispiel:

Code:

<style type="text/css">.containerDIV {
	width:100%;
}
.subcontainer {
	width:25%;
	padding:5px;
	border:1px solid red;
	float:left;
}
</style>

<div id="wrap" style="width:500px">

	<div class="containerDIV">
		<div class="subcontainer">
			Test 1
		</div>
		<div class="subcontainer">
			Test 2
		</div>
		<div class="subcontainer">
			Test 3
		</div>
		<div class="subcontainer">
			Test 4
		</div>
		<div class="subcontainer">
			Test 5
		</div>
		<div class="subcontainer">
			Test 6
		</div>
		<div class="subcontainer">
			Test 7
		</div>
		<div class="subcontainer">
			Test 8
		</div>
		<div class="subcontainer">
			Test 9
		</div>
		<div style="clear:both"></div>
	</div>

	<div style="clear:both"></div>
</div>

Die Zeilen werden nach drei Spalten umgebrochen.
Ich verstehe, warum das so ist. Es wird schliesslich zusätzlich noch der Rahmen der Elemente mitgezählt. Und somit werden die vier Elemente zu breit und das letzte der jeweiligen Zeile wird umgebrochen.
Wenn ich die Sub-Container verkleinere (z.B. auf 23% setze), dann werden vier Spalten angezeigt. Jedoch sind diese dann nicht bündig mit dem Parent-Div-Container.

Wie erreiche ich, dass die Div-Container trotz 1px-Rahmen die ganze Breite ausfüllen (auch nach einer Änderung der Fensterbreite)?
Mit einer Tabelle ginge das ganz leicht. Es muss jedoch auch mit CSS gehen...

Asipak · 19.10.2010, 15:11

Zitat:

mehrere Spalten mit Div-Containern zu realisieren, die sich wie Zellen einer Tabelle verhalten.

Worin siehst du da einen Nutzen/Sinn?

Wenn du tabellarische Daten darstellen willst, nutze auch eine Tabelle.

eagle275 · 19.10.2010, 15:26

obendrein .. width: 25% - dann kommt Border/Margin/Padding noch obendrauf .. klar dass nach 3 dieser "Spalten" nicht mehr genug Platz ist eine weitere 25% Spalte inklusive wieder Border / Margin / Padding zu platzieren - geschweige denn 6 davon .....

width: 15% könnte schon eher von Erfolg gekrönt sein, solang es 6 dieser Divs bleiben , (das war zu sehen, ohne deinen Code zu scrollen)

für 9 divs wären wohl 10% angemessen wegen Margin/Border/Padding

chunky · 19.10.2010, 15:36

Es geht nicht nur um tabellare Daten.
Es handelt sich um Design-Elemente.
Stell dir's vor wie die Spalten unter Core Services auf dieser Seite: http://systemandstyle.com/
Da würdest du wohl auch kaum vorschlagen, das mit einer Tabelle zu lösen...

ChrisB · 19.10.2010, 15:48

Zitat:

Zitat von chunky

Es geht nicht nur um tabellare Daten.
Es handelt sich um Design-Elemente.
Stell dir's vor wie die Spalten unter Core Services auf dieser Seite: http://systemandstyle.com/

Das ist nur sehr bedingt vergleichbar, weil die Aspekte, die deine gewünschte Umsetzung problematisch machen, dort gar nicht zum tragen kommen.

Zitat:

Da würdest du wohl auch kaum vorschlagen, das mit einer Tabelle zu lösen...

Nö, sondern damit: CSS Multi-column Layout Module
Als Fallback für Browser, die noch nicht so modern sind, mit den display-Eigenschaften für Darstellung in Tabellenform.
Und für Browser, die auch das immer noch nicht beherrschen, musst du dir dann überlegen, ob du als Fallback mit schmaleren Spalten arbeitetest, oder ein simpleres Layout wählst.

Oder alternativ, mittels box-sizing dafür sorgen, dass padding und border in der angegebenen Breite enthalten sind, statt dazu gerechnet zu werden.

nikosch · 19.10.2010, 16:06

Border, padding etc. mit einem zusätzlichen inneren Container lösen..

mquadrat · 26.10.2010, 14:37

Ich fand das IE6 Box-Model ja schon immer sinnvoller

Lösung siehe Post von Nikosch und hoffen, dass bei der Prozentumrechnung keine "schiefen" Pixel rauskommen. Sonst bricht es wieder um.

eagle275 · 26.10.2010, 14:43

im Regelfall sollten 4 Spalten keine großen Probleme machen ...

1000 Pixel / 4 = Ganzzahl , 960 Pixel / 4 = Ganzzahl .. wird doch wohl keiner auf die "zauberhafte Idee" kommen mit 999 Pixel zu arbeiten ^^

mquadrat · 26.10.2010, 15:05

Naja, kommt drauf an. Wenn das Layout fluid ist, dann kann der Benutzer ja mit der Breite des Fensters spielen wie er lustig ist.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] spalten in php durch arrays sortieren lassen	Dintar1989	PHP Tipps 2010	3	29.06.2010 15:32
CSS 2 spalten layout und php	d3x	PHP Tipps 2010	9	10.06.2010 20:51
Einträge von Zellen in zwei Spalten vergleichen	aschunk	Datenbanken	2	30.04.2010 05:17
[Erledigt] List-Item mit dynamischer Breite in einer Menu-Liste	chunky	HTML, Usability und Barrierefreiheit	7	11.03.2010 18:50
PHP/Access - Anfrageergebnis mit gesammten Spalten oder als Objekt ?	SkiD	PHP Tipps 2009	3	15.08.2009 23:50
[Erledigt] fixierte Breite von Divs über 100% Breite	Julian	HTML, Usability und Barrierefreiheit	3	05.07.2009 15:43
[Erledigt] Hintergrund in der breite bildschirmauflösungskompatibel machen?	litterauspirna	HTML, Usability und Barrierefreiheit	5	18.06.2009 09:51
Mehrere Spalten in einer Zeile einer 2 Tabelle	ketchup	PHP Tipps 2009	5	28.04.2009 07:49
CSS: Breite von 3 Spalten: 20%-60%=20%	dh1sbg	HTML, Usability und Barrierefreiheit	8	09.10.2008 12:10
[CSS] Verschachtelte Div Container - Breite anpassen	I-Spy	HTML, Usability und Barrierefreiheit	7	14.05.2006 11:51
Wie kann ich die Spalten einer Tabelle auslesen ?		Datenbanken	0	31.10.2005 00:29
drei Spalten einer Tabelle zusammenfügen	Lia	PHP Tipps 2005-2	24	16.08.2005 15:58
spalten zählen mit ausnahmen		Datenbanken	8	16.07.2005 13:04
Addieren von 3 Spalten, nach Ergebnis sortieren		Datenbanken	11	15.06.2005 09:54
IE: Breite = width + 0; FF: Breite = width + padding -- Häh?	tapferesschneiderlein	HTML, Usability und Barrierefreiheit	1	09.12.2004 18:45

19.10.2010, 14:54
chunky Erfahrener Benutzer Registriert seit: 19.01.2010 Beiträge: 324 PHP-Kenntnisse: Anfänger	[Erledigt] div-Spalten mit Prozent-Breite Hallo. Es gibt da etwas was ich noch nie richtig hinbekommen habe. Und zwar mehrere Spalten mit Div-Containern zu realisieren, die sich wie Zellen einer Tabelle verhalten. Ein Beispiel: Code: <style type="text/css">.containerDIV { width:100%; } .subcontainer { width:25%; padding:5px; border:1px solid red; float:left; } </style> <div id="wrap" style="width:500px"> <div class="containerDIV"> <div class="subcontainer"> Test 1 </div> <div class="subcontainer"> Test 2 </div> <div class="subcontainer"> Test 3 </div> <div class="subcontainer"> Test 4 </div> <div class="subcontainer"> Test 5 </div> <div class="subcontainer"> Test 6 </div> <div class="subcontainer"> Test 7 </div> <div class="subcontainer"> Test 8 </div> <div class="subcontainer"> Test 9 </div> <div style="clear:both"></div> </div> <div style="clear:both"></div> </div> Die Zeilen werden nach drei Spalten umgebrochen. Ich verstehe, warum das so ist. Es wird schliesslich zusätzlich noch der Rahmen der Elemente mitgezählt. Und somit werden die vier Elemente zu breit und das letzte der jeweiligen Zeile wird umgebrochen. Wenn ich die Sub-Container verkleinere (z.B. auf 23% setze), dann werden vier Spalten angezeigt. Jedoch sind diese dann nicht bündig mit dem Parent-Div-Container. Wie erreiche ich, dass die Div-Container trotz 1px-Rahmen die ganze Breite ausfüllen (auch nach einer Änderung der Fensterbreite)? Mit einer Tabelle ginge das ganz leicht. Es muss jedoch auch mit CSS gehen... Geändert von chunky (19.10.2010 um 15:10 Uhr).


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

19.10.2010, 15:26
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	obendrein .. width: 25% - dann kommt Border/Margin/Padding noch obendrauf .. klar dass nach 3 dieser "Spalten" nicht mehr genug Platz ist eine weitere 25% Spalte inklusive wieder Border / Margin / Padding zu platzieren - geschweige denn 6 davon ..... width: 15% könnte schon eher von Erfolg gekrönt sein, solang es 6 dieser Divs bleiben , (das war zu sehen, ohne deinen Code zu scrollen) für 9 divs wären wohl 10% angemessen wegen Margin/Border/Padding

19.10.2010, 15:36
chunky Erfahrener Benutzer Registriert seit: 19.01.2010 Beiträge: 324 PHP-Kenntnisse: Anfänger	Es geht nicht nur um tabellare Daten. Es handelt sich um Design-Elemente. Stell dir's vor wie die Spalten unter Core Services auf dieser Seite: http://systemandstyle.com/ Da würdest du wohl auch kaum vorschlagen, das mit einer Tabelle zu lösen...

19.10.2010, 16:06
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Border, padding etc. mit einem zusätzlichen inneren Container lösen.. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

26.10.2010, 14:37
mquadrat Erfahrener Benutzer Registriert seit: 02.09.2009 Beiträge: 1.019 PHP-Kenntnisse: Fortgeschritten	Ich fand das IE6 Box-Model ja schon immer sinnvoller Lösung siehe Post von Nikosch und hoffen, dass bei der Prozentumrechnung keine "schiefen" Pixel rauskommen. Sonst bricht es wieder um. __________________ Wir suchen PHP Entwickler (Vollzeit) im Raum Darmstadt / Rhein-Main. Infos via E-Mail mueller@new-frontiers.de

26.10.2010, 14:43
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	im Regelfall sollten 4 Spalten keine großen Probleme machen ... 1000 Pixel / 4 = Ganzzahl , 960 Pixel / 4 = Ganzzahl .. wird doch wohl keiner auf die "zauberhafte Idee" kommen mit 999 Pixel zu arbeiten ^^

26.10.2010, 15:05
mquadrat Erfahrener Benutzer Registriert seit: 02.09.2009 Beiträge: 1.019 PHP-Kenntnisse: Fortgeschritten	Naja, kommt drauf an. Wenn das Layout fluid ist, dann kann der Benutzer ja mit der Breite des Fensters spielen wie er lustig ist. __________________ Wir suchen PHP Entwickler (Vollzeit) im Raum Darmstadt / Rhein-Main. Infos via E-Mail mueller@new-frontiers.de