nicht angemeldet
dreispaltiges div layout..
Hallo Leute..
ich hab folgendes Problem..und zwar möchte ich ein dreispaltiges div layout mit drei nebeneinander stehenden div-boxen und einem übergeordnetem div container..das ganze schaut so aus:
<body>
<div id="container">
<div id="links">
lorem ipsum
</div>
<div id="mitte">
inhalt
</div>
<div id="rechts">
lorem ipsum
</div>
</div>
</body>
ich fang mal so an..
div rechts soll rechts stehen. div mitte in der mitte und div links eben links.
das ganze würde ich so realisieren, dass ich "links", "mitte" und "rechts" jeweils ein float:left verpasse und sie somit schön nebeneinander bekomme.
der übergeordnete "container" hat keine feste höhe sondern soll sich seinem inhalt entsprechend anpassen. außerdem hat er z.b. eine hintergrundfarbe oder eine y-wiederholte grafik.
das problem ist aber, das "container" mit der lösung alle boxen left floaten, nicht klarkommt und nicht die höhe seines inhalts annimmt. sobald ich aber die rechte box nicht floate, dann passt sich "container" der höhe an und stellt auch die hintergrundfarbe dar.
ich hoffe ich konnte es einigermaßen verständlich rüberbringen.
weiß jemand rat?
ps: ich möchte KEINE tabelle verwenden.
grüße
-
n'abend,
weiß jemand rat?
clear:left; könnte helfen
beispielsweise:
<div id="container"> <div id="left"></div> <div id="center"></div> <div id="right"></div> <div style="clear:both;"></div> </div>weiterhin schönen abend...
--
Freundlich wie man war, hat man mir Großbuchstaben geschenkt.
sh:( fo:# ch:# rl:| br:> n4:& ie:{ mo:} va:) de:] zu:} fl:( ss:? ls:[ js:| -
Hallo,
das problem ist aber, das "container" mit der lösung alle boxen left floaten, nicht klarkommt und nicht die höhe seines inhalts annimmt. sobald ich aber die rechte box nicht floate, dann passt sich "container" der höhe an und stellt auch die hintergrundfarbe dar.
Das Thema wurde erst vor kurzem angesprochen. Ich denke, es hast unmittelbar mit deinem Problem zu tun. {Lösung}
Wenn die mittlere Box jedoch den Hauptinhalt repräsentiert, solltest du diese Box vielleicht lieber nicht floaten. Dann kannst du dem linken und dem rechten div nämlich eine feste Breite zuweisen, während sich der Inhalt flexibel an's Layout anpasst.Also lieber das rechte <div> rechts floaten lassen (und im Quelltext natürlich über dem Inhalt platzieren).
mfg. Daniel
-
Hi,
das problem ist aber, das "container" mit der lösung alle boxen left floaten, nicht klarkommt und nicht die höhe seines inhalts annimmt.
warum auch, sie wurden aus dem Fluss der Elemente herausgenommen. Füge ein <br style="clear:left"> hinter rechts ein um den Fluss wiederherzustellen, und gib container in Conditionals für IE <=6 eine dummy height(IE 7 stattdessen eine min-height) wegen der hasLayout Problematik.
Gruesse, Joachim
--
Am Ende wird alles gut.-
hab eine kleine information vergessen. im IE funzt die version "links" "mitte" und "rechts" mit jeweils float:left wunderbar. der "container" zeigt die hintergrundfarbe an und passt sich wunderbar den einzelnen höhen der divs an.
der firefox macht nur zicken. sobald ich "rechts" floate, blendet er beim "container" die hintergrundfarbe aus. da nützt auch kein clear in nachfolgendem div´s oder br´s.
die methode "links" float:left - dann "right" float:right - und "mitte" ohne float, funktioniert im firefox, klappt allerdings im ie nicht, da im IE die "mitte" so viel abstand von oben bekommt wie "rechts" hoch ist..
ich bin schon seit stunden am rumprobieren. die beiträge von 2005 helfen mir dabei auch nicht weiter.
-
vielleicht hilfts ja was..so in etwa sollte das layout aussehen:
http://homepages.at/phunky/layout.gif
grüße
-
hi,
der firefox macht nur zicken. sobald ich "rechts" floate, blendet er beim "container" die hintergrundfarbe aus.
Er "blendet" nicht aus, sondern der Container bekommt schlicht und einfach überhaupt keine Höhe mehr, wenn alle seine Inhalte gefloatet sind - weil float ein Element aus dem Fluss nimmt.
da nützt auch kein clear in nachfolgendem div´s oder br´s.
Nein, ein clear:left kann dann nicht helfen - weil ja _right_ gefloatet wurde.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Nein, ein clear:left kann dann nicht helfen - weil ja _right_ gefloatet wurde.
ganz gleich was für ein clear - es hilft alles nichts.
-
Nein, ein clear:left kann dann nicht helfen - weil ja _right_ gefloatet wurde.
»»
mit "rechts" floaten meinte ich nicht die richtung sondern die id des div´s. -
hi,
ganz gleich was für ein clear - es hilft alles nichts.
Solche "Problembeschreibungen" helfen auch nichts.
Vielleicht beschäftigst du dich erst mal in Ruhe mit dem Weblog-Eintrag Grundlagen für Spaltenlayout mit CSS.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Solche "Problembeschreibungen" helfen auch nichts.
vielleicht hätte diese oder möglicherweise auch jene Problembeschreibung geholfen.
aber ums Problem nochmal zusammenzufassen:
So funktionierts im IE aber nicht im Firefox, da der feuerfuchs die Hintergrundfarbe vom "container" nicht mehr anzeigt..
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TEST</title><style type="text/css">
#container {
width:800px;
background-color:orange;
}#links {
float:left;
width:200px;
background-color:red;
}#mitte {
float:left;
width:400px;
}#rechts {
float:left;
width:200px;
background-color:red;
}
</style></head>
<body>
<div id="container">
<div id="links">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<div id="mitte">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<div id="rechts">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<div style="clear:both"></div>
</div>
</body>
</html>und so funktionierts im Firefox, aber nicht im IE, da im Explorer die "mitte" um die höhe von "rechts" einen Abstand von oben bekommt..
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TEST</title><style type="text/css">
#container {
width:800px;
background-color:orange;
}#links {
float:left;
width:200px;
background-color:red;
}#mitte {
width:400px;
margin-left:200px
}#rechts {
float:right;
width:200px;
background-color:red;
}
</style></head>
<body>
<div id="container">
<div id="links">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<div id="rechts">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<div id="mitte">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<div style="clear:both"></div>
</div>
</body>
</html>aber da ich diese problem schon in 4 verschiedenen foren erläutert habe, und keiner eine lösung dafür hat, werde ich wohl gesenkten hauptes aufgeben.
Viele Grüße
-
Hallo,
mit IE meinst du wohl zunächst noch den IE6?
Dein erstes Beispiel schaut bei mir in IE6, IE 7 und in Firefox
eigentlich so schon ähnlich genug aus, Abstände zum Seitenrand
können natürlich noch angepasst werden.Das zweite Beispiel läßt sich offenbar per CSS-Weiche für den IE 6
retten (und schaut im IE 7 auch brauchbar aus):[code lang=css]* html #mitte {margin:0;float:left;}[/code}
Grüsse
Cyx23 -
hi,
So funktionierts im IE aber nicht im Firefox, da der feuerfuchs die Hintergrundfarbe vom "container" nicht mehr anzeigt..
Ich habe dir doch bereits erklärt, dass das kein "Nichtanzeigen" des Hintergrundes ist, sondern lediglich eine Darstellung des Elements ohne jegliche Höhe.
aber da ich diese problem schon in 4 verschiedenen foren erläutert habe, und keiner eine lösung dafür hat, werde ich wohl gesenkten hauptes aufgeben.
Ja, wenn du alle Hinweise - in diesem Fall auf die ausführliche Erklärung im Weblog - ignorierst, bleibt dir wohl wenig anderes übrig.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; } -
Hallo,
Solche "Problembeschreibungen" helfen auch nichts.
aber ums Problem nochmal zusammenzufassen:
So funktionierts im IE aber nicht im Firefox, da der feuerfuchs die Hintergrundfarbe vom "container" nicht mehr anzeigt..
[Lösung mit 3x float:left]
Funktioniert einwandfrei in meinem Firefox 2.
und so funktionierts im Firefox, aber nicht im IE, da im Explorer die "mitte" um die höhe von "rechts" einen Abstand von oben bekommt..
[Lösung mit float:right und float:left]
Auch hiermit hat der IE7 absolut keine Probleme.
aber da ich diese problem schon in 4 verschiedenen foren erläutert habe, und keiner eine lösung dafür hat, werde ich wohl gesenkten hauptes aufgeben.
Ach was, ich denke das Problem ließe sich lösen aber…
Deine beiden Beispiele sahen jeweils vollkommen identisch in beiden Browsern (FF2 und IE7; jew. winXP) aus. Wo liegt das Problem?
Wenn du willst, kann ich dir auch einen Screenshot hochladen.mfg. Daniel
-
naja, was soll ich sagen..das Problem war, das mein Mozilla 1.0.6 im clearenden Element ein Leerzeichen brauch. dat war alles.
danke für die mühen
-
-
-
-
-
-