3Spalten, gleiche Länge
0 0 0 0 
Detlef G.
0
3Spalten, gleiche Länge
Hallo!
Ich habe 3Spalten (2x float: left, 1x float: right) mit unterschiedlichem Hintergrund und verschiedenen Inhalten (wird mit php-Dateien bestückt), die jedoch immer in gleicher Länge (height) erscheinen sollen.
CODE:
#leftColumn{
float: left;
width: 150px;
margin:0; padding:0;
background-color: #eeeeee;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
#middleColumn{
float: left;
width: 320px;
background-color: #990000;
border-left: 1px solid #eeeeee;
border-bottom: 1px solid #990099;
}
#rightColumn{
float: right;
width: 200px;
color: black;
background-color: #CCCCCC;
text-align: left;
line-height: 1.5em;
margin:0; padding:0;
border-left: 1px solid rgb(216,210,195);
}
.cleaner {
clear:both;
height:1px;
font-size:1px;
border:none;
margin:0; padding:0;
background:transparent;
}
Habe schon viel mit clear: both rumprobiert, aber finde nicht die Lösung.
Wie funktionierts???
Danke für Eure Hilfe.
Gruß, Maggie
-
Hi!
Ich habe 3Spalten (2x float: left, 1x float: right) mit unterschiedlichem Hintergrund und verschiedenen Inhalten (wird mit php-Dateien bestückt), die jedoch immer in gleicher Länge (height) erscheinen sollen.
Habe schon viel mit clear: both rumprobiert, aber finde nicht die Lösung.
Wie funktionierts???Mit CSS ist dies leider nicht möglich.
Gruß
Martin
P.S.: Code wird hier mit [ code lang=XXX]...[/code] ausgezeichnet. z.B.
<p id="hallo">Hallo Welt</p> -
Hi,
Ich habe 3Spalten (2x float: left, 1x float: right) mit unterschiedlichem Hintergrund und verschiedenen Inhalten (wird mit php-Dateien bestückt), die jedoch immer in gleicher Länge (height) erscheinen sollen.
da die Spalten feste Breiten in px haben, eignet sich eine Hintergrundgrafik, um den Spalteneffekt optisch zu simulieren. Siehe das Beispiel http://de.selfhtml.org/css/layouts/anzeige/hintergrund.htm und die Erläuterung hierzu.
freundliche Grüße
Ingo-
Hallo Ingo
da die Spalten feste Breiten in px haben, eignet sich eine Hintergrundgrafik, um den Spalteneffekt optisch zu simulieren. Siehe das Beispiel http://de.selfhtml.org/css/layouts/anzeige/hintergrund.htm und die Erläuterung hierzu.
Da ich selber sehr lange sehr intensiv versucht habe, 3 Container auf dieselbe Höhe zu kriegen, würd ich mich freuen, wenn ich vielleicht doch durch Zufall mal auf eine Lösung stoße. Dass man einen Hintergrund für den Spalteneffekt nutzen kann, ist mir klar, allerdings habe ich die Contzainer nie auf dieselbe Höhe gekriegt. ein
height:100%;bezieht soich ja immer auf das Elternelement und kann sich ja leider nicht auf die links oder rehts daneben fliessenden Boxen beziehen.Aber wie gesagt: ich würd mich freuen, doch noch eine Lösung zu finden.
Gruß
Martin
-
Hallo Martin
Da ich selber sehr lange sehr intensiv versucht habe, 3 Container auf dieselbe Höhe zu kriegen, würd ich mich freuen, wenn ich vielleicht doch durch Zufall mal auf eine Lösung stoße.
Es gäbe Lösungen, für die der IE aber leider zu dumm ist:
http://d-graff.de/demos/selfhtml/gleichehoehe.htmlWobei ich mir die Frage stelle, warum unbedingt die Container selbst diese Höhe
haben sollen. Es geht doch um das Design. Dabei reicht es doch, wenn es so
aussieht, als ob diese die gleiche Höhe hätten.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin! -
Hi,
Da ich selber sehr lange sehr intensiv versucht habe, 3 Container auf dieselbe Höhe zu kriegen
das geht mit CSS auch nicht.
Dass man einen Hintergrund für den Spalteneffekt nutzen kann, ist mir klar, allerdings habe ich die Contzainer nie auf dieselbe Höhe gekriegt. ein
height:100%;bezieht soich ja immer auf das Elternelement und kann sich ja leider nicht auf die links oder rehts daneben fliessenden Boxen beziehen.Offensichtlich ist es Dir noch nicht klar. Der Spalten-Effekt wird nur simuliert, d.h. die Elemente haben nicht dieselbe Höhe. Im von mir genannten Beispiel wird dem umgebenen Container eine geteilte Hintergrundgrafik zugewiesen. Wenn Du innerhalb dieses Containers am Ende ein clearendes Element platzierst, stellst Du den Elementfluß wieder her, so daß sich der Container auf die Höhe der enthaltenen floatenden Elemente ausdehnen kann - und der Hintergrund somit den Spalteneffekt simuliert.
freundliche Grüße
Ingo-
Hallo Ingo!
... dem umgebenen Container eine geteilte Hintergrundgrafik zugewiesen.
Das war das, was ich übersehen habe.
Schade, meine Container haben (in diesem Fall leider, ansonsten zum Glück) eine flexible Breite, somit ist das ganze für mcih unbrauchbar, ebenso die Lösung von Detlef, da durchaus noch einige Kunden den IE benutzen ;-) Aber ich arbeite daran, sie davon wegzubringen...Gruß
Martin
-
Hi,
Schade, meine Container haben (in diesem Fall leider, ansonsten zum Glück) eine flexible Breite
auch dann ginge es so wie in dem Beispiel - allerdings nur für zwei "Spalten" und einer festen Breite in px für eine dieser Spalten. Für drei Spalten, bei denen die äußeren floaten und eine Breite in beliebiger Einheit haben, ginge noch die Methode mit border in diesen Breiten für den mittleren Bereich; die gefällt mir allerdings gar nicht.
freundliche Grüße
Ingo-
Hallo Ingo!
Für drei Spalten, bei denen die äußeren floaten und eine Breite in beliebiger Einheit haben, ginge noch die Methode mit border in diesen Breiten für den mittleren Bereich; die gefällt mir allerdings gar nicht.
Dazu müsste doch dann der mittlere Container aus dem Fluss genommen werden und immer der höchste sein, oder hab ich da nen Knoten in meinen Hirnwindungen?
Gruß
Martin
-
Hi, also ich bin auch noch nicht glücklich mit meinen 3 Column. Hier ein Tipp
http://www.pixy.cz/blogg/clanky/css-3col-layout/
bei meinen Containers hats nicht geklappt aber vermutl. habe ich auch irgend einen Fehler drin.
Wenn es Euch weiterhilft, freue ich mich über einen Hinweis der richtigen Handhabung.
Gruß,
Maggie -
Hi,
Dazu müsste doch dann der mittlere Container aus dem Fluss genommen werden und immer der höchste sein, oder hab ich da nen Knoten in meinen Hirnwindungen?
Ich finde das Beispiel jetzt leider nicht mehr, aber ich glaube, daß hier der mittlere Container im Fluß blieb. Eine ganz simple Möglichkeit mit border, die ohne Zusatzcontainer und Hintergrundgrafiken auskommt, wäre, dem Mittleren Container einfach statt seitlichen margins border in der Breite der floatenden Container zu geben. Funktioniert zumindest, wenn der mittlere Container der höchste ist. Und wenn die floatenden Container selbst auch noch die Hintergrundfarbe haben, hat zumindest noch der höchste auch noch durchgehend diese Farbe.
freundliche Grüße
Ingo
-
-
-
-
-
-