nicht angemeldet
2 Spalten, jeweils gleich hoch
Hi,
ich verzweifle noch mal an CSS, ich probier jetzt seit geschlagenen 4 Stunden an einem total simplem Layout herum und ich kriegs einfach nicht hin. Ihr seid meine letzte Hoffnung, sonst schmeiss ich wieder die Tabellen rein :-P
Es geht um folgendes: Ich möchte ein übergeordnetes Div, dass einen Rahmen zeichnet, darin 2 Divs nebeneinander, wobei beide unterschiedliche Hintergrundfarben haben sollen und jeweils genau gleich hoch sein sollen, wobei die Gesamthöhe, jeweils dem höheren entspricht.
Ist also im linken Feld mehr Inhalt wird das rechte Feld "langgestreckt", entsprechend im umgekehrten Fall. Das übergeordnete Div, soll dabei den Rahmen zeichnen.
Momentan habe ich folgendes:
<div style="border: 1px solid black; width: 500px">
<div style="float: left; background-color: #767676; width: 100px">left</div>
<div style="background-color: #C8C8C8; margin-left: 100px">right</div>
</div>
Das funktioniert solange gut, bis eines der beiden Divs mehr Inhalt hat, als das andere. Wenn das Linke mehr hat, "zieht" das Rechte nicht nach, und umgekehrt, wobei der Firefox im 1. Fall sogar einfach über den Rahmen des übergeordneten Divs "hinwegzeichnet".
Im Grunde ist mir das Problem ja durchaus klar, die beiden inneren Divs, haben keinerlei Beziehung zu einander, aber ich habe keine Ahnung wie ich es hinkriegen könnte.
Ich hoffe, ich konnte das halbwegs verständlich rüberbringen...
Schlussendlich möchte ich eigentlich exakt folgendes ohne Tabelle:
<table border=1 width=500>
<tr>
<td bgcolor="#767676" width=100>left</td>
<td bgcolor="#C8C8C8">right</td>
</tr>
</table>
Schonmal vielen Dank!
mfg
kalim
-
Hi,
ich verzweifle noch mal an CSS, ich probier jetzt seit geschlagenen 4 Stunden an einem total simplem Layout herum und ich kriegs einfach nicht hin.
Warum nutzt Du die Zeit nicht, um mal in der Dokumentation zu suchen? Dann hättest Du sicherlich recht schnell http://de.selfhtml.org/css/layouts/mehrspaltige.htm#hintergrund gefunden.
freundliche Grüße
Ingo-
Hi Ingo,
vielen Dank für deine Antwort.
Ich habe die Beispiele durchaus gefunden und auch angeschaut, leider konnte ich nichts für meinen Fall finden.Dein Beispiel "simuliert" ja nur zwei Spalten mit Hilfe einer Hintergrundgrafik - Ich möchte zwei wirklich unabhängige Divs nebeneinader. Das Problem ist ja, dass das untergeordnete Div die Begrenzung des übergeordneten nicht mehr erweitert, sobald es ein float:left drin hat.
kalim
-
Hi,
Dein Beispiel "simuliert" ja nur zwei Spalten mit Hilfe einer Hintergrundgrafik - Ich möchte zwei wirklich unabhängige Divs nebeneinader.
Du hast auch darunter die
"Erläuterung:
Da nebeneinander platzierte Elemente sich nicht in ihrer Höhe beeinflussen ..."gelesen? Es _gibt_ außerhalb von Tabellen(darstellung) keine "Spalten". Du hast es hier mit dem Box-Modell zu tun. Dies hättest Du bereits in der Einleitung dieses Kapitels unter Das Box-Modell als Grundlage CSS-basierter Layouts nachlesen können:
"Auch die Höhe einer Box richtet sich - sofern sie nicht explizit zugewiesen ist - nach ihrem Inhalt und wird nicht von der Höhe einer nebenstehend platzieren Box beeinflusst. Eine Spaltenaufteilung mit durchgängigen Hintergrundfarben, die in Tabellen-Layouts leicht zu realisieren ist, lässt sich daher in einem CSS-Layout nur umständlich optisch simulieren."
Fazit: zwei nebeneinandrstehende DIVs sind "wirklich unabhängig". Aber das willst Du offensichtlich garnicht haben. Dann mußt Du entweder die Abhängigkeit (Spaltenhöhe) simulieren oder wieder Tabellen verwenden.
freundliche Grüße
Ingo-
Hallo Ingo,
diese Erläuterung habe ich tatsächlich nicht gelesen, vielen Dank für deinen Hinweis.Mein Fazit: Ich wusste nicht was ich wollte :-)
Besten Dank für deine Hilfe!
Freundliche Grüsse
kalim-
Hi,
Mein Fazit: Ich wusste nicht was ich wollte :-)
das fragte ich mich bei Deiner Lösung (die übrigens das DIV#main vermutlich gar nicht benötigt) in der Tat auch. ;-)
Und diese Standardlösung hättest Du auch im Beispiel http://de.selfhtml.org/css/layouts/anzeige/kopfundfuss.htm finden können...freundliche Grüße
Ingo
-
-
-
Falls irgendwer jemals etwas ähnliches sucht, ich hab es jetzt mit folgendem Aufbau endlich hinbekommen:
<div id="wrapper">
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
</div>
wobei id=left das Attribut float: left haben muss und id=footer das Attribut clear: both.
kalim
-
-