3 Spalten immer gleich hoch. Wie mach ich das?

Fanello · #1 (**permalink**) 21.02.2006, 14:26

Liebe CSS-Gemeinde.

Ich bin an einer grösseren CSS-Knacknuss.. bin eigentlich schon sehr weit aber ein wichtiges Detail fehlt noch.

Teilauszug aus dem CSS:

Code:

#inhalt_kopf_3sp {
	width: 833px;
	height: 8px;
	top: 10px;
	margin-left: 10px;
	margin-top: 34px;
	background-image: url(../graph/hg/hg_inhalt_kopf_3sp.gif);
	background-repeat: no-repeat;
}

#inhalt_hg_3sp {
	width: 833px;
	margin-left: 10px;
	background-image: url(../graph/hg/hg_inhalt_3sp.gif);
}

#inhalt_fuss_3sp {
	width: 833px;
	height: 10px;
	margin-left: 10px;
	margin-bottom: 34px;
	background-image: url(../graph/hg/hg_inhalt_fuss_3sp.gif);
	background-repeat: no-repeat;
}

#spalte_1 {
	float: left;
	margin-left: 5px;
	width: 260px;
	background-color: Aqua;
}

#spalte_2 {
	float: left;
	margin-left: 21px;
	width: 260px;
	background-color: Aqua;
}

#spalte_3 {
	float: left;
	margin-left: 21px;
	width: 260px;
	background-color: Aqua;
}

Teilauszug aus dem HTML-Code:

Code:

<div id="inhalt_grund">

	<div id="inhalt_kopf_3sp"></div>
	<div id="inhalt_hg_3sp">
		<div id="spalte_1">
				fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
		fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
		fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
		fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf

		</div>
		<div id="spalte_2">
				fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
		fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
		fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
		fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
		
		</div>
		<div id="spalte_3">
				fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
		fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
		fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
		fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
		
		</div>
	</div>
	<div id="inhalt_fuss_3sp"></div>

</div>

Wie es im Moment aussieht seht ihr im Attachment css-bild.jpg.
Es hat 3 Spalten, und diese 3 Spalten müssen immer gleich hoch sein. Also wenn in der ersten Spalte 5 Zeilen und in den anderen beiden Spalten nur 2 Zeilen stehen, dann müssen alle so hoch sein wie die erste Spalte.
Im Moment liegen die 3 Spalten schöne nebeneinander, allerdings wird die Ebene (inhalt_hg_3sp) die diese 3 Spalten umschliesst nicht angepasst bzw. höher gemacht.

Aussehen müsste es wie im Bild css-bild2.jpg.

Vielen Dank für eure Tipps.

PS: das hässliche blau habe ich nur gemacht, damit man die Ebene besser sieht...

mazzo · #2 (**permalink**) 21.02.2006, 14:29

such mal nach "faux columns", steht auch im XHTMLwiki (oben) unter den FAQs.

Fanello · #3 (**permalink**) 21.02.2006, 14:50

ich arbeite eigentlich schon mit dieser "Kacheln"-Lösung.. aber für mein Beispiel brauchts glaub noch was zusätzliches....

mazzo · #4 (**permalink**) 21.02.2006, 14:55

sofern die Boxen fixe Breiten haben hast Du per Kachelung schonmal den linken und rechten Rand immer passend. Eine Grafik, die etwa so aussieht
(#=rahmen, -=Farbe der Box, +=Farbe des Hintergrundes):

#--------#++#--------#++#--------#

Oben und unten braucht es dann ein Extra-Element mit einem Hintergrund für den Abschluss der Bögen.

Boris · #5 (**permalink**) 21.02.2006, 15:03

Da fehlt bei den ganzen floats eine Kleinigkeit ... clear

Fanello · #6 (**permalink**) 21.02.2006, 15:32

Zitat:

Zitat von mazzo

sofern die Boxen fixe Breiten haben hast Du per Kachelung schonmal den linken und rechten Rand immer passend. Eine Grafik, die etwa so aussieht
(#=rahmen, -=Farbe der Box, +=Farbe des Hintergrundes):

#--------#++#--------#++#--------#

Oben und unten braucht es dann ein Extra-Element mit einem Hintergrund für den Abschluss der Bögen.

genau das mache ich schon.. nur hab ich das Problem, dass die Spalten-Ebenen in der der Text steht, in die Ebene plaziert wird in der der Hintergrund gemacht wird.
Aber eben diese Hintergrund-Ebene wächst nicht mit.

Fanello · #7 (**permalink**) 21.02.2006, 15:36

Zitat:

Zitat von Boris

Da fehlt bei den ganzen floats eine Kleinigkeit ... clear

ich hab jetzt das clear in allen möglichen Varianten versucht.. ohne positives Resultat...

Ich habs gleich in der Ebene (CSS) definiert, das wäre doch korrekt, oder?

mazzo · #8 (**permalink**) 21.02.2006, 15:39

sicher nicht in allen Varianten sonst wäre dieser Thread nicht da

Du musst, wenn Du "clearfix" benutzt (siehe meine Sig), dem Element diesen CSS-Code zuweisen, welches floatierte Elemente beinhaltet. Dabei auch den Starhack für den IE nicht vergessen. Steht alles in Ulles Codebeispiel unter dem Link in der Signatur.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Layout: 2 Spalten gleich langer Höhe	Boof	CSS	1	05.03.2010 10:50
Drei spaltige webseite: Spalten mit opacity highlighten.	sepp88	Javascript & Ajax	2	16.11.2009 14:10
Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript	chrisol_76	CSS	2	21.07.2008 17:37
3 dynam. Spalten mit Inhaltsüberlauf	spacegaier	CSS	6	12.10.2007 00:24
Tooltip für Spalten ?	SolCom	(X)HTML	0	21.11.2005 15:26