✔ DIV Andordnung und ungewollte überlappung

D

droni

Erfahrenes Mitglied
Hallo zusammen,

nachdem ich jetzt das ganze Wochenende versucht habe, eine Lösung zu finden gebe ich es nun auf und frage mal hier nach.

Folgendes Situation:

Ich möchte tabellarisch gesehen eine Darstellung haben, wo 2 Spalten nebeneinander stehen und die rechte Spalte nochmal in 2 Zellen aufgeteilt wird.
Quasi so:
11 22
11 33

Wenn jetzt die erste Spalte wächst (alle Daten kommen aus der DB) soll die Zelle 2 oben hängen und Zelle 3 unten hängen:

11 22
11
11
11 33

Wenn die Zellen 2 und oder 3 mehr gefüllt sind, soll die Zelle 1 natürlich mitwachsen.
Ich habe es erst mit float versucht. Da bekam ich aber Probleme dass z.B. die Zelle 1 nicht mitgewachsen ist.
Mein letzter Stand ist folgender:
CSS: 
<div style="width:650px; border:1px #000 solid;">
    <div style="display:table-row; border:1px #000 solid;">
        <div style="display:table-cell;width:130px; border:1px #000 solid;">1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br></div>
        <div style="display:table-cell; position:relative;">
            <div style="position:absolute; top:0; width:510px; border:1px #000 solid;">2<br>2<br>2<br>2<br>2<br>2<br>2<br></div>
            <div style="position:absolute; bottom:0; width:510px; border:1px #000 solid;">3<br>3<br>3<br>3<br>3<br>3<br>3<br></div>
        </div>
    </div>
</div>

Das klappt soweit auch, aber anscheind gibt hier die Zelle 1 die Höhe an und wächst nicht mit, wenn 2 und 3 größer werden. Wenn 2 und 3 zusammen größer sind als die Zelle 1 überlappen die sich einfach.

Gibt es da einen Trick die Überlappung zu verhindern und Zelle1 mitwachsen zu lassen?

Vielen Dank!
 
droni hat gesagt.:
Ich möchte tabellarisch gesehen eine Darstellung haben, wo 2 Spalten nebeneinander stehen und die rechte Spalte nochmal in 2 Zellen aufgeteilt wird.
Zum Vergrößern anklicken....
Warum zeichnest du die tabellarischen DB-Daten nicht mit dem dafür semantisch vorgesehenen Tabellen-Element aus? Damit dürfte sich das selbst produzierte Darstellungsproblem in Luft auflösen.
 
Achso, du meinst eine richtige Tabelle...
Das hatte ich auch schon, aber da habe ich es nicht geschafft
Browserübergreifend die Zelle 3 unten festzunageln. Hing immer
an Zelle 2
 
Schau mal hier:
CSS: 
table,td {border:1px solid #000}
table {width:650px}
table tr:nth-child(1) td:nth-child(1) {width:130px}
table tr:nth-child(2) td {width:510px}
table tr:nth-child(1) td {vertical-align:top}
table tr:nth-child(2) td {vertical-align:bottom}
HTML: 
<table>
  <tr>
    <td rowspan="2">1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br></td>
    <td>2<br>2<br>2<br>2<br>2<br>2<br>2<br></td>
  </tr>
  <tr>
    <td>3<br>3<br>3<br>3<br>3<br>3<br>3<br></td>
  </tr>
</table>
 
Zuletzt bearbeitet:
Problem ist da (abgesehen davon, dass ich in JS noch mehr oder weniger DAU bin) dass ich nicht weiß wie hoch die linke Zelle wird.
Die Daten aus allen drei Zellen kommen variabel aus der DB.
 
Die Höhe der linken Zelle kannst Du aus der der beiden rechten berechnen. Aber Spicelab hat dir ja doch eine Lösung mit CSS gegeben. Wobei es mit JS allerdings einfacher und leichter zu lesen wäre.
 
droni hat gesagt.:
Achso, du meinst eine richtige Tabelle...
Das hatte ich auch schon, aber da habe ich es nicht geschafft
Browserübergreifend die Zelle 3 unten festzunageln. Hing immer
an Zelle 2
Zum Vergrößern anklicken....
Kurzer Nachtrag bzgl. der Browserunterstützung: Mein vorgestelltes Tabellen-Modell hab ich erfolgreich in den aktuellen Versionen von Firefox u. IE überprüft :)

Weitere Browser (Google-Chrome, Opera, Safari) hab ich hier am "dienstlichen" Arbeitsplatz nicht zur Verfügung. Kann dies aber gerne heute Nachmittag am heimischen PC nachholen, sofern von deiner Seite Bedarf besteht :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück